The Featured collection section shows product cards under a heading. The products come from one collection, from a list you pick, or from Shopify's recommendations for the product on the page. In its default layout, the cards sit in a row that customers scroll sideways with arrows. To add one, click Add section in the editor and select one of the four Featured collection presets. It works on any page.
If the section has no products to show, it does not appear on your store. In the editor, it shows the message "Pick a collection to show products here." in its place, also when Related to the product or Bought with the product is chosen on a page that is not a product page.
Presets
The Add section list shows four presets, one for each Product layout except Photo and grid. Each one is a starting point, and its settings can change it into any of the others. To get Photo and grid, add any preset and change Product layout.
Featured collection
Featured collection grid
Featured collection spotlight
Featured collection pinned row
Product layout
Carousel
Grid
Spotlight
Pinned row
Maximum products
6
6
4
10
Use it for
A row of bestsellers
A short set of products in full view
Three or four products, one at a time
A row of products that moves as customers scroll
Each preset uses the collection with the handle frontpage if your store has one. Otherwise, the section shows nothing until you choose a collection under Collection.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Collection shows products from the collection you choose under Collection. Selected products shows the products you pick under Products, in the order you pick them. Related to the product and Bought with the product show Shopify's recommendations for the product on the page, so they work only on a product page and hide everywhere else.
Collection
The collection the products come from. Used when Source is Collection, and for the photo in Photo and grid.
Products
The products to show. Used when Source is Selected products.
Product layout
Carousel shows the cards in a row that customers scroll sideways, with arrows at the end of the heading. Grid shows every card at once, in rows. Spotlight shows one product at a time: a large photo stays in place on the left while each product's name, price and button scroll past on the right, and the photo changes to match the product in the middle of the screen. Pinned row holds the section on the screen while the row of cards moves sideways as customers scroll down, with a counter such as 01 / 10 in the heading's row. Photo and grid puts a large photo next to a grid of cards two across, with color dots under each card.
Maximum products
How many products show, from 2 to 12. The default is 6. Hidden with Selected products, which shows every product you pick.
Columns
How many cards sit side by side, from 2 to 4. The default is 4. On narrower screens, the grid shows fewer columns so cards do not get too small. Shows with Grid.
Button label and Link
A link at the end of the heading, such as "View all" to the collection's page. Button label shows once Link has a value.
Description
A short paragraph under the heading.
On screens narrower than 1,000 px, Spotlight keeps the photo at the top of the screen and shows the products' text under it. In browsers that cannot move the Pinned row with the scroll, and for customers whose device is set to reduce motion, the cards show as a row that customers scroll sideways themselves.
Photo and grid
On screens 1,000 px and wider, Photo and grid splits the area under the heading in two. A tall photo with rounded corners fills the left half and stays in place while the cards on the right scroll past. The cards sit two across, so each one is as wide as in a grid of four. The photo is the image of the collection chosen under Collection, whatever Source says. When there is no such image, it is the first product's photo. On smaller screens, the photo sits above the cards, which stay two across.
The Button label shows as a large link with an arrow at the right end of the heading's row.
Under each card, a row of round color dots shows the values of the product's first option that has color swatches, such as its colors. Pointing at a dot shows the product's photo in that color. Clicking a dot keeps that photo, and the card then links to that color. A product whose options have no swatches shows no dots. Color swatch settings explains how options get swatch colors.
Recommended products
Related to the product and Bought with the product use the product on the page, so add the section to a product template. Shopify's recommendations fill at most 10 cards, whatever Maximum products says. If Shopify has no recommendations for a product, the section stays hidden on that product's page. Recommend other products on the product page explains where each kind of recommendation comes from.
Product cards
These settings change how the cards in this section look, as Product card settings in sections explains. With Spotlight, only Show vendor and Show short description apply, and the other settings are hidden. The short description is the product's subtitle, or the first 20 words of its description, as Show a short description on product cards explains.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings. Rise on scroll is hidden with Spotlight.
The Featured collection section shows product cards under a heading. The products come from one collection, from a list you pick, or from Shopify's recommendations for the product on the page. In its default layout, the cards sit in a row that customers scroll sideways with arrows. To add one, click Add section in the editor and select one of the four Featured collection presets. It works on any page.
If the section has no products to show, it does not appear on your store. In the editor, it shows the message "Pick a collection to show products here." in its place, also when Related to the product or Bought with the product is chosen on a page that is not a product page.
Presets
The Add section list shows four presets, one for each Product layout except Photo and grid. Each one is a starting point, and its settings can change it into any of the others. To get Photo and grid, add any preset and change Product layout.
Featured collection
Featured collection grid
Featured collection spotlight
Featured collection pinned row
Product layout
Carousel
Grid
Spotlight
Pinned row
Maximum products
6
6
4
10
Use it for
A row of bestsellers
A short set of products in full view
Three or four products, one at a time
A row of products that moves as customers scroll
Each preset uses the collection with the handle
frontpageif your store has one. Otherwise, the section shows nothing until you choose a collection under Collection.Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Background
The background settings are explained in Section background settings.
Content
Setting
What it does
Source
Collection shows products from the collection you choose under Collection. Selected products shows the products you pick under Products, in the order you pick them. Related to the product and Bought with the product show Shopify's recommendations for the product on the page, so they work only on a product page and hide everywhere else.
Collection
The collection the products come from. Used when Source is Collection, and for the photo in Photo and grid.
Products
The products to show. Used when Source is Selected products.
Product layout
Carousel shows the cards in a row that customers scroll sideways, with arrows at the end of the heading. Grid shows every card at once, in rows. Spotlight shows one product at a time: a large photo stays in place on the left while each product's name, price and button scroll past on the right, and the photo changes to match the product in the middle of the screen. Pinned row holds the section on the screen while the row of cards moves sideways as customers scroll down, with a counter such as 01 / 10 in the heading's row. Photo and grid puts a large photo next to a grid of cards two across, with color dots under each card.
Maximum products
How many products show, from 2 to 12. The default is 6. Hidden with Selected products, which shows every product you pick.
Columns
How many cards sit side by side, from 2 to 4. The default is 4. On narrower screens, the grid shows fewer columns so cards do not get too small. Shows with Grid.
Button label and Link
A link at the end of the heading, such as "View all" to the collection's page. Button label shows once Link has a value.
Description
A short paragraph under the heading.
On screens narrower than 1,000 px, Spotlight keeps the photo at the top of the screen and shows the products' text under it. In browsers that cannot move the Pinned row with the scroll, and for customers whose device is set to reduce motion, the cards show as a row that customers scroll sideways themselves.
Photo and grid
On screens 1,000 px and wider, Photo and grid splits the area under the heading in two. A tall photo with rounded corners fills the left half and stays in place while the cards on the right scroll past. The cards sit two across, so each one is as wide as in a grid of four. The photo is the image of the collection chosen under Collection, whatever Source says. When there is no such image, it is the first product's photo. On smaller screens, the photo sits above the cards, which stay two across.
The Button label shows as a large link with an arrow at the right end of the heading's row.
Under each card, a row of round color dots shows the values of the product's first option that has color swatches, such as its colors. Pointing at a dot shows the product's photo in that color. Clicking a dot keeps that photo, and the card then links to that color. A product whose options have no swatches shows no dots. Color swatch settings explains how options get swatch colors.
Recommended products
Related to the product and Bought with the product use the product on the page, so add the section to a product template. Shopify's recommendations fill at most 10 cards, whatever Maximum products says. If Shopify has no recommendations for a product, the section stays hidden on that product's page. Recommend other products on the product page explains where each kind of recommendation comes from.
Product cards
These settings change how the cards in this section look, as Product card settings in sections explains. With Spotlight, only Show vendor and Show short description apply, and the other settings are hidden. The short description is the product's subtitle, or the first 20 words of its description, as Show a short description on product cards explains.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings. Rise on scroll is hidden with Spotlight.