Favorite collection
Build an engaging and attractive Favorite collection section
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.
How to add a Favorite collection section to your Shopify store
Steps:
In the theme editor (Customize) > click Add section
Select Favorite collection.
Make necessary changes.
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.
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 (2 - 12).
You can modify the Column gap and Row gap between each product cards for a balanced layout.
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.
Last updated
Was this helpful?