Appearance
Featured collection β
This guide describes setting up the Featured collection section.
Use the section to advertise and promote a selection of products from a collection.
β
βThe previous image shows a Featured collection section on a store's home page. In the upper left, part of Theme editor's section menu is displayed. The menu's Products per row option is set to 5, and the Rows option is set to 1. Inside the section, these options display 5 products in a single row from the store's featured collection.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Set up a Featured collection section β
To set up a Featured collection section:
In Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Featured collection section.
Note
The section can be added to any page, except Checkout and Gift card pages. To add the section to the current page, select Add section > Featured collection. Refer to Shopify help: Add a section.
From the side menu, select Featured collection.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Collection | Use the Collection picker to set up a collection to display inside the section. Refer to Shopify help: Collections. |
| Product tile type | Use the Product tile type options to specify the type of product tile to display inside the section. The options are Standard or Text overlay. With Standard product tiles, product details, like product title and price, are displayed below the section's product images. With Text overlay product tiles, product details overlay the section's product images. |
| Products per row | Adjust the Products per row slider to specify the number of products to display within each row inside the section. The minimum is 2 products and the maximum is 5. This setting applies to desktop display devices. |
| Rows | Adjust the Rows slider to specify the number of product rows to display inside the section. The minimum number is 1 row and the maximum is 5. |
| Products per row on mobile | Use the Products per row on mobile options to specify the number of products to display in each row inside the section. The options are 1 and 2. This setting applies to mobile display devices. |
| Quick buy > Enable quick buy | Use the Enable quick buy option to show or hide a Choose options button beside products inside the section. A store visitor uses the button to choose product options to add to the cart. Note that this option is only supported when the Product tile type option is set to Standard. |
| Header > Subheading | In the Subheading field, enter text to display as a subheading for the section. Note that the Subheading field is hidden in Theme editor when the Heading field is empty. |
| Header > Heading | In the Heading field, enter text to display as a heading for the section. |
| Header > Show "View all" link | Use the Show "View all" link option to show or hide a link inside the section for accessing an entire collection. |
| Header > Show collection products count as superscript | Use the Show collection products count as superscript option to show or hide a number beside the collection inside the section. The number is displayed as superscript and indicates how many products there are in the collection. |
| Color > Color scheme | Use the Color scheme picker to select a color scheme for the section. Refer to Colors. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the CSS field, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |
Note
To connect a metafield to a setting that supports metafields, select the Connect dynamic source icon displayed beside the setting in Theme editor.
To learn how to connect a metafield to a supported setting, refer to Shopify help: Connecting metafields to your theme by using the theme editor.