The Featured collection section draws attention to products from a specific collection on your home page. You can display up to four products from the same collection in this dedicated space.
Add Featured collection to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Featured collection
- Click the section, then Add
Include an optional heading
Add a Heading for the Featured collection home page section using the text field.
Select collection to display
Choose the Collection to pull products from using the corresponding dropdown menu.
If you need to make changes to your collection, you can use the Edit collection shortcut on top of the field.
Control how many products are displayed
Use the Number of products slider to adjust the number of products from the selected collection.
Select a layout
There are two options for the section's layout: Slideshow and Grid. Select one of these options using the Layout dropdown.
Use the slideshow layout
The Slideshow option is the original display for the section, combining four products with a Call-to-action block.
Customize the call to action
The Call to action (CTA) is the "View all" tile that falls at the end of the collection row.
To change the text color, simply click the swatch next to Text color.
Include a background image
To add a background image (and replace the opaque background of the CTA), click the indigo Select image button.
To change the background color of your CTA, it is tied to the Colors portion of the Theme settings. If you wish to change this, you can do so by expanding the Theme settings at the bottom of the section and changing the color swatch next to Links. Adjustments made here affect the color of your Featured collection CTAs and all of your links in the storefront.
Use the grid layout
The Grid option is a more-recent layout option, displaying the section's products in rows of five. Additional rows (up to five total rows) are stacked below.
Include a title card for the grid layout
Include a Title card for your section's Grid layout by selecting [+] Add title card. Just like the CTA for the Slideshow layout, this connects customers with the collection page to continue browsing.
Set the Position using the labeled dropdown. Add a Pre-heading and Heading to add messaging.
Adjust the colors for Text and Overlay, then control the level of Overlay opacity using the slider.