Skip to main content
The Facet featured collection section shows products from one collection on any page. Products appear as product cards in a grid or a sideways-scrolling carousel, and an optional collection card can introduce the collection beside them. This page covers the collection picker, the layout options and the collection card.
The Featured collection section as it appears on the Facet demo storefront.

​
What this section controls

  • The collection whose products are shown, and how many.
  • A grid or a carousel layout, and the number of columns on large screens.
  • The carousel arrows and dots.
  • An optional collection card with a picture, heading, text and button.

​
Getting started

1

Open the Theme Customizer

In your Shopify admin, open Online Store, then Themes, and click Customize next to Facet.
2

Add the section

In the Sections panel, click Add section and choose Featured collection. The section can’t be added to the header or footer.
3

Pick a collection

Click Featured collection, then click Collection and choose one from the collection picker.
4

Choose the layout

Set Products to show, Layout and Desktop columns.
The theme editor with the Featured collection section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.

​
Section settings

​
Products

Theme editor sidebar showing the Featured collection section settings: Heading alignment, Collection, Products to show, Layout, Desktop columns, Show arrows, and more.
The alignment of the intro heading and text: Left (default), Center or Right.
The collection to show, chosen with Shopify’s collection picker. Products appear in the collection’s own sort order, each with a quick add button. Until you pick a collection, the section shows four placeholder product cards.
The most products to show from the collection: from 2 to 12. Default: 4.
  • Grid (default): products sit in rows.
  • Carousel: products sit in one row that shoppers scroll sideways.
How many columns the products use on screens 750 pixels wide and larger: 2 columns, 3 columns or 4 columns (default). Phones show 2 products per row in the grid.
  • Show arrows: on by default. Shows previous and next buttons beside the heading. Appears only when Layout is Carousel.
  • Show pagination dots: on by default. Shows dots under the carousel. Appears only when Layout is Carousel.

​
Collection card

Theme editor sidebar showing the Featured collection section settings (part 2, scrolled): Card color scheme, Image, Show collection name, Heading, Text.
Theme editor sidebar showing the Featured collection section settings (part 3, scrolled): Button label, Card image ratio, Common settings, Color scheme, Top padding, Bottom padding, and more.
The collection card is a large card at the start of the products that introduces the collection and links to it. Its picture, heading, text and button label come from the collection unless you fill them in here.
Off by default. Turn it on to show the card. The other card settings appear only when it is on. With 4 columns, the card takes the space of two products. With 2 or 3 columns, it takes the space of one.
Image above the text (default) or Text over the image.
Colors the card’s text panel, or the text and button over the picture.
The card picture. Leave it empty to use the collection’s image. Without either, a placeholder shows.
Show collection name is on by default and shows a heading on the card. Heading replaces the collection name with your own text. It appears only when Show collection name is on.
A short text on the card. Leave it empty to use the start of the collection description, about 24 words.
Default: “Shop collection”. Leave it blank to show no button. The button and the picture link to the collection, or to the all products page when no collection is picked.
The shape of the card picture: 1:1 (default), 4:5, 3:4, 2:3, 5:4, 4:3 or 16:9.

​
Common settings

Theme editor sidebar showing the Featured collection section settings (part 4, scrolled): Card image ratio, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.
See Common settings for details.
  • Color scheme: the colors of the section.
  • Top padding and Bottom padding: None, Small, Medium, Large (default) or Extra large.
  • Page width: Narrow, Narrower, Fluid (default) or Full.

​
Blocks

​
Intro heading and text

The section has a fixed Heading and Text block above the products. Their settings are described on Theme blocks.

​
Best practices

  • Show a full row. Set Products to show to a multiple of Desktop columns, such as 4 or 8 with 4 columns, so the last row isn’t half empty.
  • Use the carousel for long lists. Above 8 products, a carousel keeps the section short.
  • Write a card text. A collection description written for the collection page is often too long for the card. A sentence typed in Text reads better.

Product cards

Change how the product cards in this section look.

Tabbed collections

Show several collections in one section with tabs.