> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Show products from a collection with Facet

> Set up Facet's featured collection section: pick a collection, show its products in a grid or carousel, and add an optional collection card.

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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/featured-collection/featured-collection-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=eb8c3a05b8d36333b2c672f0f1630e63)

## 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/featured-collection/featured-collection-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=5b4879762522e0219e7684a9fa435bce)

## 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/featured-collection/featured-collection-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=b2baef2ad49f61f34231284ff3330f09)

> [accordion] Heading alignment
>
> The alignment of the intro heading and text: **Left** (default), **Center** or **Right**.

> [accordion] Collection
>
> 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.

> [accordion] Products to show
>
> The most products to show from the collection: from 2 to 12. Default: 4.

> [accordion] Layout
>
> * **Grid** (default): products sit in rows.
> * **Carousel**: products sit in one row that shoppers scroll sideways.

> [accordion] Desktop columns
>
> 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/featured-collection/featured-collection-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=08442bf8e6465d6ec6a1f3afec63c6d3)

![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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/featured-collection/featured-collection-settings-3.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=69e6a8dc2e0889d4a203ca1a2823049d)

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.

> [accordion] Show collection card
>
> 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.

> [accordion] Card layout
>
> **Image above the text** (default) or **Text over the image**.

> [accordion] Card color scheme
>
> Colors the card's text panel, or the text and button over the picture.

> [accordion] Image
>
> The card picture. Leave it empty to use the collection's image. Without either, a placeholder shows.

> [accordion] Show collection name and Heading
>
> **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.

> [accordion] Text
>
> A short text on the card. Leave it empty to use the start of the collection description, about 24 words.

> [accordion] Button label
>
> 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.

> [accordion] Card image ratio
>
> 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.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/featured-collection/featured-collection-settings-4.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=ba883521655f7f392c5e5176a140818f)

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) 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](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md).

## 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.

## Related guides

> [card] [Product cards](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/product-cards.md)
>
> Change how the product cards in this section look.

> [card] [Tabbed collections](https://docs.shopify.lightsout.agency/themes/facet/sections/tabbed-collections.md)
>
> Show several collections in one section with tabs.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.