Add a Featured collection section to draw attention to products included in a selected collection.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Featured collection.
Section settings
Click the Featured collection section to customize its general settings.
Section heading
Add a heading to introduce the section with the Section heading field.
Add text
Use the Text field to introduce your Featured collection section.
Use the Text size and Mobile text size to adjust the font size for the text.
Select collection to display
Click Select collection to connect a collection with the section.
Control products and columns displayed
Use the Maximum products shown slider to control the total amount of products from the collection to include in the section.
Adjust the Number of columns on desktop slider to control the amount of vertical columns for the products.
Select Enable carousel on desktop to apply a slideshow-like layout for the columns.
For mobile devices, scroll down to the Mobile layout to select 1 column or 2 columns for the Number of columns on mobile.
Customize product cards
Select an Image ratio for the product cards. The options are Adapt to image, Portrait, and Square.
Enable Show second image on hover to reveal a secondary product image on cursor hover.
Enable Show vendor to include the product's vendor label on the card.
Add a "View all" button
To connect the customer with the collection page, consider enabling a "View all" button.
Activate Enable "View all" if collection has more products than shown to include a "View all" button.
Customize the Button style by selecting Filled or Outline, then select the Button background color and Button text color.
Customize colors and spacing
Select colors
Choose colors for the section's Text color and Background color.
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.