Featured collection shows products from one collection as product cards, with a heading and a link to the whole collection. The Masthead and Almanac presets use it for new arrivals on the home page. Until you choose a collection, the section shows placeholder products, on your storefront as well as in the theme editor, so choose a collection before you publish.
Where to find it
In the theme editor, click Add section and choose Featured collection. You can add it to the home page or any other page that takes sections, as many times as you like.
Layout options
Layout picks the arrangement:
- Standard: products in rows or in one sideways-scrolling row, as set by Desktop layout.
- Lead product: the first product is shown large, with the rest beside it.
- Rail: the heading sits in a column at the side, and the products scroll sideways beside it.
On mobile, products follow Columns on mobile and Enable swipe on mobile. A rail always swipes.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Collection | Collection. | The collection whose products are shown. |
| Eyebrow | Text. | A short label above the heading, such as "New in". With Number sections on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Medium. | How large the heading is set. |
| Layout | Standard, Lead product or Rail. Default: Standard. | A standard grid or row, a large lead product, or a rail. |
| Products to show | 2 to 12. Default: 8. | How many products are shown, from the start of the collection. The collection's own sort order decides which come first. |
| Desktop layout | Grid or Slideshow. Default: Slideshow. | Grid shows rows; Slideshow shows one row that scrolls sideways. Applies to the Standard layout. |
| Columns on desktop | 2 to 5. Default: 4. | How many products sit in a row on desktop. |
| Columns on mobile | 1 column or 2 columns. Default: 2 columns. | How many products sit side by side on mobile. |
| Enable swipe on mobile | On or off. Default: on. | Lets customers swipe through the products on mobile. When off, products stack in a grid. |
| Show "View all" link | On or off. Default: on. | Adds a link to the full collection at the top of the section. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Background image | ||
| Image | Image. | An optional image behind the whole section, cropped around its focal point. Text keeps the color scheme's text color, so darken or lighten the image with the overlay until everything reads clearly. |
| Overlay color | Color. Default: #000000. | The color laid over the background image. |
| Overlay opacity | 0% to 90%. Default: 40%. | How strong the overlay is. 0% shows the image untouched. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Image sizes
| Image | Recommended | Notes |
|---|---|---|
| Product images | As set for your products | Products are shown as product cards, cropped to the Image ratio chosen in theme settings under Product cards. With Lead product, the first product is shown at twice the size, so its image should be at least 1600 px wide. |
Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.
Tips
- Sort the collection in Shopify so the products you most want seen come first.
- With Lead product, an odd number such as 5 fills the layout: one large and four small.
- Use a short eyebrow such as "New in" and let the heading carry the mood.