In this documentation, we will show you how to customize the Heaven Slider Widget by Ultimate Store Kit.

Enable the Heaven Slider Widget

To use the Heave Slider from Ultimate Store Kit Widget must be enabled. Navigate to WordPress Dashboard > Ultimate Store Kit Plugin dashboard.

1. Navigate to WC Widgets Tab.
2. Search by the Heaven Slider Widget Name.
3. Enable the Heaven Slider Widget.
4. Hit the Save Settings Button.

Inserting The Heaven Slider widget

1. Go to the Elementor Editor Page and Hit the Add Element ” + ” Icon.
2. Search by the Heaven Slider widget name.
3. The widget will appear, Check the Ultimate Store Kit logo on top right corner.
4. Select the widget then Drag and Drop it on the editor page.

Configuring the Content Tab

The Content Tab provides options to manage and structure the core settings of elements. It allows to define the content and functionality to align with design goals.

Layout Section

Go to Content > Layout

1. Item Height: Set the height for the items. It refers the slider height.
2. Image Resolution: Select the desired resolution, such as thumbnail, full size, or other predefined dimensions.
3. Content Position: Set the position of the content. It can be Left or right position for the content.

4. Show Navigation: Enable the switcher to show the Navigation for sliding the items.
5. Show Thumbs: To demonstrate the thumbs on the slider section, Just turn on the switcher.

Query Section

Go to Content > Query

1. Source: Select the source for displaying the items on the slider. Different source are available e.g.: Product, Custom Product etc.
2. Product Limit: Set the limitation to display the products on the slider.
3. Include: Include refer to the include specific products by selecting the category or tags.

Learn more about the Query features tutorial.

Additional Options Section

Go to Content > Additional Options

Content

1. Title: Enable the switcher to demonstrate the Title.
2. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Category: Turn on the switcher to show the category of the relevant products.
4. Category Title Tag: Set any HTML Tag for Category ( H1, H2, H3, H4, H5, H6, p, span ). The Category tag is essential for both user experience and search engine optimization (SEO).

5. Text: Enable the switcher to demonstrate the text of the products. It’s refer the description of the product.
6. Text Limit: Enable the switcher to show limitation of text.
7. Rating: Enable switcher to show the Rating of the product.
8. Price: Enable the switcher to show the price of the product.

Badge

1. Sale: To demonstrate the Sale badge turn on the switcher. It indicate the product is for sale.
2. Percentage: Enable the switcher to show the discount percentage of the price.
3. Stock Status: Check the available stock of the products, Enable the switcher to show stock status.

4. Trending: To show the trending the product badge turn on the switcher.
5. New: To show the new product enable the switcher.
6. Newness Days: Set the newness day to show the new badge on the products.

Action btn

1. Wishlist: Enable the switcher to show the Wishlist button. It listed the product on Wishlist.
2. Compare: Compare button us for comparing the products. Enable the switcher to show it.
3. Quick View: Enable the quick view button to show the quick eye view of the product.
4. Add to Cart: Add to Cart button to add the product on the cart, Enable it to display the Add to cart button.

Slider Settings Section

Go to Content > Slider Settings

1. Autoplay: Enable the switcher to show the slider play automatically.
2. Autoplay Speed: Set the speed for the sliding. It speed measure in second.
3. Pause on Hover:To pause the content on hover activate the switcher of Pause On Hover.
4. Grab Cursor: To grab the slider and slide it enable the grab cursor feature.

5. Loop: Enable the switcher to show the Loop. It will loop the slider infinetely.
6. Mouse wheel: Mouse wheel feature is for sliding the content using the mouse wheel.
7. Animations Speed (ms): Set the speed for the animation. The speed counts in milisecond.
8. Observer: Enable the switcher for the observer.

Designing with the Style Tab

The Style Tab offers a range of options to enhance the visual appearance of elements, enabling precise adjustments and creative design possibilities. It helps create polished and engaging layouts effortlessly.

Slider Section

Go to Style > Slider

1. Background Type: Set the background type for the slider item. Choose Color or image for the background.
2. Border Type: Set the border type of it for the Slider. Different type of border are available: Solid, Dashed, Dotted, Double, Grove.
3. Border Width: Set the thickness of the border width.

4. Border Color: Set the color for the border.
5. Border Radius: Make the border corner edges rounded by following.
6. Padding: Make the padding for the inner space.

Image Section

Go to Style > Image

1. Border Type: Set the border type of it for the Image. Different type of border are available: Solid, Dashed, Dotted, Double, Grove.
2. Border Width: Set the thickness of the border width.
3. Border Color: Set the color for the border.

4. Border Radius: Make the border corner edges rounded by following.
5. CSS Filers: It refers the filtering the images. Changes the color of the image by filtering.

Title Section

Go to Style > Title

1. Color: Choose the color for the Title.

3. Margin: Set the margin for the Title. It set outer space from another content.
4. Typography: Set the typography for the title

5. Text Shadow: Set the shadow for the text.
6. Text Stroke: Make the text stroke from the section.

Hover Title

2. Hover Color: Set the hover color for the Title.

Price Section

Go to Style > Price

1. Regular Color: Set the Regular color to demonstrate the Price of the Product.
2. Sale Color: Choose the color for the sale price.
3. Margin: Set the margin for the price.
4. Typography: Set the typography for the Price.

Rating Section

Go to Style > Rating

1. Color: Set the color for the Rating.
2. Active Color: It demonstrate the color for the Active rating.
3. Margin: Set the margin for the rating.

Badge Section

Go to Style > Badge

1. Border Type: Set the border type of it for the Badge. Different type of border are available: Solid, Dashed, Dotted, Double, Grove.
2. Border Width: Set the thickness of the border width.
3. Border Color: Set the color for the border.
4. Border Radius: Make the border corner edges rounded by following.

5. Padding: Set the inner space by setting the padding.
6. Margin: Make outer space by setting the margin.
7. Space Between: Make the space between the badge items.
8. Typography: Set the typography for the badge.

Sale

1. Color: Set the color for the badge text.
2. Background Type: Select the type color and choose color for the sale badge.
3. Border Color: Select the border color for the sale.

Discount

1. Color: Set the color for the badge text.
2. Background Type: Select the type color and choose color for the Discount badge.
3. Border Color: Select the border color for the Discount.

Stock

1. Color: Set the color for the badge text.
2. Background Type: Select the type color and choose color for the sale Stock.
3. Border Color: Select the border color for the Stock.

Trending

1. Color: Set the color for the badge text.
2. Background Type: Select the type color and choose color for the sale Trending.
3. Border Color: Select the border color for the Trending.

New

1. Color: Set the color for the badge text.
2. Background Type: Select the type color and choose color for the sale New.
3. Border Color: Select the border color for the New.

Action Button Section

Go to Style > Action Button

1. Border Type: Set the border type of it for the Action Button. Different type of border are available: Solid, Dashed, Dotted, Double, Grove.
2. Border Width: Set the thickness of the border width.
3. Border Color: Set the color for the border.
4. Border Radius: Make the border corner edges rounded by following.

5. Padding: Set the padding for inner space of the action buttons.
6. Margin: Set the margin for the outer space of the buttons.
7. Icon Size: Select the size for the icon of the Action buttons.

Tooltip Font: Choose Font for the tooltip of the button. The tooltip appear on the top of the button.

Wishlist

1. Color: Set the color for the Wishlist Icon.
2. Background Color: Choose the background color for the Wishlist.
3. Border Color: Set the the border color for the button.

Hover

The changes will appear on mouse hover over the Wishlist button

4. Color: Set the color for the Wishlist Icon.
5. Background Color: Choose the background color for the Wishlist.
6. Border Color: Set the the border color for the button.

Active

The changes will appear on activation of the Wishlist button

1. Color: Set the color for the Wishlist Icon.
2. Background Color: Choose the background color for the Wishlist.
3. Border Color: Set the the border color for the button.

Compare

1. Color: Set the color for the Compare Icon.
2. Background Color: Choose the background color for the Compare.
3. Border Color: Set the the border color for the button.

Hover

The changes will appear on mouse hover over the Compare button

1. Color: Set the color for the Compare Icon.
2. Background Color: Choose the background color for the Compare.
3. Border Color: Set the the border color for the button.

Active

1. Color: Set the color for the Compare Icon.
2. Background Color: Choose the background color for the Compare.
3. Border Color: Set the the border color for the button.

Quickview

1. Color: Set the color for the Quick View Icon.
2. Background Color: Choose the background color for the Quick View.
3. Border Color: Set the the border color for the button.

Hover

The changes will appear on mouse hover over the Quickview button

1. Color: Set the color for the Quick view Icon.
2. Background Color: Choose the background color for the Quick view.
3. Border Color: Set the the border color for the button.

Cart

1. Color: Set the color for the Cart Icon.
2. Background Color: Choose the background color for the Cart.
3. Border Color: Set the the border color for the button.

Hover

The changes will appear on mouse hover over the Cart button

1. Color: Set the color for the Cart Icon.
2. Background Color: Choose the background color for the Cart.
3. Border Color: Set the the border color for the button.

Category Section

Go to Style > Category

Normal

1. Color: Set the color for the category.
2. Text Decoration Color: Set the text decoration color.
3. Color: Set the background for the category.

4. Border Type: Set the type for the border.
5. Border Width: Set the thickness of the border.
6. Border Color: Set the border color for the border.
7. Border Radius: Make the border radius for corner edges rounded.

8. Padding: Set the padding for the normal.
9. Margin: Set the margin for the padding.
10. Space Between: Set the space between the category.

11. Typography: Set the typography for the hover.
12. Box Shadow: Make the shadow for the box.

Hover

Changes will appear on the hover.

1. Color: Set the color for the category.
2. Background Type: Make the background type for the hover.
3. Border Color: Make the border color.

Navigation Section

Go to Style > Navigation

1. Arrows Icon: Set the style for the arrows icon. Different icon preset are available on there.

Normal

2. Color: Set the color for the Navigation Icon.
3. Background Type: Set the background type for the color.
4. Border Type: Make the border type color.
5. Border Width: Set the Thinkness for the border.

6. Padding: Set the padding for the inner space of the navigation arrows.
7. Margin: Set the margin for the icon.
8. Size: Set the size for the icon.
9. Space Between Arrows: Make the space between the arrows.

Hover

1. Color: Set the color for the navigation icon.
2. Background Color: Choose the background color for the icon.
3. Border Color: Set the border color for navigation arrows.

Thumbs Section

Go to Style > Thumbs

Normal

1. Background Type: Select the type for the background. Choose the color for the backgroun.
2. Border Type: Set the type for the border.
3. Border Width: set the thicknes for the border by selecting the border width.

Hover

1. Border Color: Set the border color for the Thumbs section on hover state

Active

1. Border Color: Set the border color for the thumbs active.

Video Assist

Video Tutorial Coming soon!

Please visit the demo page for examples.
Thanks for being with us.