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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/spark/pages/theme-sections/featured-collection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
