The Featured collection section displays products from a selected collection in an engaging and attractive home page section. Paired with a customizable Title or View all card, products are contained in a sequence of cards—each with an add-to-cart button and quickshop feature.
Use the theme editor to introduce the section with a heading, control how many products are displayed, select a layout, and include a title card or include a view-all card.
Add Featured collection to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Featured collection
- Click the section, then Add
- Save
Introduce the section with a heading
Add a Heading for the Featured collection home page section using the provided text field. To exclude a heading, leave the Heading field blank.
Select collection to display
Choose the Collection to feature by clicking Select collection.
Control how many products are displayed
Use the Number of products slider to adjust the number of products displayed in the section.
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.
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
Add a Title card by selecting [+] Add content, then Title card.
Click Select image to upload or select one of Shopify's free images.
Adjust card size
If you're using the Grid layout option, use Horizontal size and Vertical size dropdowns to adjust the space the card will occupy.
Select 1 column, 2 columns, or 3 columns to adjust the width of the card.
Select either 1 row or 2 rows to adjust the height of the card.
Customize your copy
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.
Include a view-all card
Add a View all card by selecting [+] Add content, then View all card.
Click Select Image to upload or select one of Shopify's free images.
Use Text alignment to adjust the text's position and arrangement for the view all card.
Include a Pre-heading and Heading using the provided text fields.
