Click HERE for an interactive tutorial. Scroll to the bottom for animated steps.
Detailed Step-by-Step Tutorial
Add Featured Products
- Go to ECOMMERCE at the top of the screen.
- Drag Featured Products widget to an area of the page where you'd like to add it to.
Choose Products for Featured Products
- Go to ECOMMERCE > Store Management.
- Go to Catalog > Products.
- Click on the product you want to add to Featured Products.
- Go to Attributes tab.
- Toggle Yes for Featured Products option.
- Click Save Product.
Manage Featured Products
- Double-click on Featured Products section or highlight it and go to Settings pane > APP.
Featured Products Settings
- Choose Style: Choose a style for the featured product section between default, carousel, or advanced.
- Color Swatch: Toggle ON to enable different product colors preview.
- Add to Cart: Toggle ON to allow customers to add a product to cart.
- Show Price: Toggle ON to show the product price.
- Show Retail Price: Toggle ON to show regular retail price for the product.
- Show Review Stars: Toggle ON to show the average customer review stars.
- Show Quick View: Toggle ON to show a quick view option for customers to open a dialog with additional product information.
- Show Borders: Toggle ON to show the borders of the products.
General Settings
- Title: Enter the title.
- Show as Tooltip: Show the title as tooltip (text that appears when your mouse hovers over the featured products section).
- Top: Set top margin.
- Left: Set left margin.
- Width: Set the width.
Background
- Color: Choose background color.
- Opacity: Set opacity for the background.
- Image: Enable to use an image as a background.
- Size: Choose background size (i.e. auto, 100%, etc.).
- Position: Set position of the background.
- Repeat: Choose repeat type for the background.
Border
- Color: Choose border color.
- Style: Chose border style.
- Width: Choose the width of the border.
- Radius: Choose border corner radius.
Box Shadow
- Shadow: Toggle ON to create a shadow for the tabs.
- H-Shadow: Set horizontal position of the shadow.
- V-Shadow: Set vertical position of the shadow.
- Blur: Set blur value for the shadow.
- Spread: Define how far the shadow spreads.
- Color: Set the color for the shadow.
- Style: Select between inset and outset.
Comments