Featured collections

How to add section Featured collections to website

Display products from a selected collection in an engaging and attractive section. Featuring collections can help merchants promote sales and new collections. This article will show you how to add and customize your featured collection section.

Featured collections on website

In the theme editor (Customize), Add section Featured collections.

Configure section Featured collections

Product Card Settings

In the theme editor (Customize), click section Featured collections then locate Product Settings. Here you can make the necessary configurations.
If the default value is set, the configuration in theme settings will be applied. See instructions for configuring theme settings for product card.

Product Card Settings on section

Collection : Select a collection to display products.
Skin : Choose skin for product card.
Hover style : Select image effect when hovering.
Aspect Ratio : Configure aspect ratio for card images.
Image Size : Configure image size for card images. See more about the sizes attribute .
Show Rating : Show product rating. For this option to work you need to install the review app. See instructions.
Products Per Page : Configure the number of product displayed.
Items Gap (px) : Configure the distance between card items.
Paginate : Configure pagination for section product.

Product Card Style

In the theme editor (Customize), click section Featured collections then locate Product Style. Here you can make the necessary configurations.

Product Card Style on section

Title color : Configure color for product card title.
Description Color : Configure color for product card description.
Image spacing (px) : Configure spacing for image product.
Price margin top (px) : Configure margin top for price product.
Title margin top (px) : Configure margin top for title product.
Swatch margin top (px) : Configure margin top for swatch product.
Rating margin top (px) : Configure margin top for rating product.
Description margin top (px) : Configure margin top for description product.

Build layout section

Layout slider

You can display block layout grid or slider.If you want to use layout slider see Section Slider Layout

Switch slider or grid

Layout grid

If you use layout grid.At the settings section, You can configure items to display on 1 row for each screen device.

Configure items to display on a row of layout grid

Other configurations of section

You can see the documentation for other section configurations such as: Heading, container, background, animation, padding...