The Featured collection displays four product cards for a selected collection, right on the home page.
Use the theme editor to add an optional heading, customize the section colors, select the collection to display, and select a layout for the Featured collection section.
Add Featured collection to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Featured collection
- Click the section, then Add
- Save
Add optional heading
Add a Heading for the Featured collection homepage section using the text field.
Customize the section colors
Choose an optional Section heading color and Section background color by clicking the rounded-rectangle swatches.
Select the collection to display
Assign the Collection to display in this section by clicking Select 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.
Customize the call-to-action link
The Call-to-action portion of this section is found at the end of the product row. To use color settings separate from the Colors settings, click the rounded-rectangle swatch beside Text color.
To include a custom image in place of the solid background color, click Select image. Images used here should be 500 x 750px.
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.