Favorite collection 🔥

Build an engaging and attractive Favorite collection section enhancing the shopping experience and drives sales

The Favorite collection section allows you to display a curated collection of products on your homepage. This section helps highlight specific products that you want to showcase, making it easier for customers to discover them.

In this article, we will show you how to add a Favorite collection section.

This section is available on ✨ Zest version 9.0.0 onwards. See our Changelog

How to add a Favorite collection section to your Shopify store

Steps:

1. In the theme editor (Customize) > click Add section

2. Select Favorite collection.

3. Make necessary changes.

4. Save the settings.

How to edit a Favorite collection section

Section settings

General

See how to adjust the Container settings

See how to adjust the Color scheme settings

Select the Collection of products you want to display.

Upload a custom Image to visually represent the collection.

Enable the Enable sticky columns on desktop option to keep the collection fixed while scrolling.

Section header

Use the Desktop Padding Bottom setting to modify the space under the Section header, controlling how much gap exists before the next section. (Small/ Medium/ Large)

Use the provided text fields to add a suitable Heading, Subheading, and Description.

• Leave them blank if you do not want to display them

Change the Heading size to the desired size:

• Heading - Medium

• Heading - Large

• Heading - Extra large

• Heading - Extra extra large

• Mega title - Base

You can also change the Heading color:

• Leave it blank if you do not want to use the default color setting in the Color scheme.

See: How to apply Highlight text to the section heading and block headings?

Button settings

You can also display a call-to-action button to redirect customers to your desired pages.

The Button label field sets the text displayed on the button

• Leave this blank if you do not want to display the button.

Enter the URL where users will be directed when they click the button to the Button link field.

Choose a desired Button style to match your design:

• Primary button

• Secondary button

• White button

• Underline button

Grid settings

Use the Products to show slider to select the number of products displayed in the section in the (2 - 12).

You can modify the Column gap and Row gap between each product cards for a balanced layout.

• No gap

• Double Extra-small

• Extra-small

• Small

• Medium

• Large

• Extra-large

The Column gap setting only works on the mobile screen.

Product card

Select the product card's Image ratio as:

• Use global settings

• Adapt to image

• Square (1:1)

• Portrait (3:4)

• Landscape (4:3)

Enable or disable the Show vendor option display or hide product vendors on the product cards.

Mobile layout

Check the Enable swipe on mobile option to make the product list swipeable instead of showing in grid layout.

Choose between 1 column or 2 column layout option in the Number of columns on mobile for better readability.

Section padding

See how to adjust the Section padding settings

Section divider

See how to adjust the Section divider settings

Custom attributes

See how to adjust the Custom attributes settings

Animations

See how to adjust the Animations settings