> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/spark/pages/theme-sections/featured-collection.md).

# Featured collection

The **Featured collection** section displays a single-row carousel of products from a selected collection.

> See the [Featured collection row](/spark/pages/theme-sections/featured-collection-row.md) section for a carousel of products with a title card included as the first column.

![](/files/px3UgPLYhCP9Hf343ibD)

## Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/spark/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/spark/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Select a **Template** to edit from the dropdown menu in the top bar.

   > Learn how to use templates in our [Templates guide](/spark/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Featured collection**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

### Select featured collection

Select a **Collection** to display its products in a grid with adjustable rows and columns.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Featured collection** section to open the settings.
2. Use the **Select collection** button find the collection you want to feature.

   > We recommend collections with at least 4 products.
3. Use the slider to set the **Maximum number of products** to display from your collection. Between **3** and **15**.

   > The products will display in the sort order as set in your Shopify admin settings. Learn more about admin settings for your [collection pages layout](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection).
4. Select the **Number of columns** to display on desktop screens.

   > On mobile devices, one column is displayed.
5. To make your images a uniform shape and size, select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of your image.

   ![](/files/P7WonYtlZhexu2rtwHZZ)
6. Click **Save**.

</details>

## **Section headings and button**

Add section headings and an optional button that can link to your collection or another page.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the **Featured collection grid** section to open the section settings.
2. Enter **Heading** text to display a section title.

   > The default heading is "Featured collection."
3. Enter **Subheading** text to display below the heading.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
4. Enter short text for the **Button label** to link to the collection page.

   > Leave this field blank to remove the button.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
5. Click **Save**.

</details>

## Section style

Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click on the section to find the **Section style** settings.

   ![](/files/2CL811q430UqBxOkiWlv)
2. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](/spark/theme-styles/animation.md) in Spark.
3. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
4. Select a **Spacing** option to add padding around the section content.

   > Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.

   ![](/files/mD4aOudXNMBtAk7HVTaK)
5. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
6. Click **Save**.

</details>

## Settings reference

Click the **Featured collection** section to find the following settings.

| Setting            | Description                                                                                                                                                                                                                                                                                                     |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Select collection  | Select a collection from your store's existing collections. For more information about collections, see [Shopify's Collections guide](https://help.shopify.com/en/manual/products/collections).                                                                                                                 |
| Max products       | Set the maximum number of products to display within in the section: between 2 and 12.                                                                                                                                                                                                                          |
| Heading            | Add text to show a main heading.                                                                                                                                                                                                                                                                                |
| Subheading         | Add text to show a subheading below the main heading.                                                                                                                                                                                                                                                           |
| Text               | Add text to show beneath the subheading.                                                                                                                                                                                                                                                                        |
| Button label       | Enter call-to-action text for a button that links to the collection page. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).                                                                                                                                 |
| Image aspect ratio | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our [Image settings guide](/spark/general/image-guide/theme-image-settings.md). |

**Section style**

| Setting                     | Description                                                                                                                                                                                                           |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable animation            | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See our [Section animations](/spark/theme-styles/animation.md) to learn more.                                     |
| Use alternate section color | Apply the alternate section colors as chosen in your Theme Settings. See Spark's [theme color settings](/spark/theme-styles/colors.md) to learn how to create a secondary color scheme with alternate section colors. |
| Spacing                     | Add padding around the section content: either the Top and bottom, Top only, Bottom only, or set it to None.                                                                                                          |
| Spacing amount              | Increase or decrease the amount of space around the section: either Full, Half, or Minimum.                                                                                                                           |
| <p><br></p>                 |                                                                                                                                                                                                                       |

***

> **Related links**
>
> [Featured collection row](/spark/pages/theme-sections/featured-collection-row.md)\
> [Product listing settings](/spark/products/product-listings.md)\
> [Collection pages](/spark/collection-pages/collection-pages.md)\
> [Shopify collections guide](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection)
