# Featured collection slider

The **Featured collection slider** section displays products from multiple collections as a rotatable carousels. With Quick View enabled, customers can buy your products without leaving the page.

> See the [Featured collection grid](https://help.fluorescent.co/stiletto/sections/theme-sections/featured-collection-grid) to display your collections in multiple rows with adjustable columns.

## Set up section

***

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

In the editor side panel, click **(+) Add section** and select **Featured collection slider**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

### Select featured collection

***

Select multiple **Collections** to display their products in a single row that customers can click through. You can also create a **Manual product list** instead of a collection.

<details>

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

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

1. Under the section, click on a **Collection** block to open the settings.

   > Click **(+) Add block** to create new row items.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Use the **Select collection** button find the collection you want to feature.

   > We recommend collections with at least 3 products.
3. Enter the **Collection name** that displays as a link that customers can click to switch between collections in the section.
4. For the **Manual product list** block, use the **Select products** button and check off all the products you want to display.
5. Click **Save**.

</details>

`Click blocks to find settings`

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Select collection</mark></td><td>Select a collection to display its products. Collections are created and edited in your Shopify admin.</td></tr><tr><td><mark style="color:blue;">Show view all link</mark></td><td>Display a "View all" card at the end of the list to link to your product collection.</td></tr><tr><td><mark style="color:blue;">Collection name</mark></td><td>Change the link label that customers can click to switch between collections in the section.</td></tr></tbody></table>

#### Collection tabs layout

{% hint style="info" %}
Tab layout options were added in v5.2.0. View the [changelog](https://help.fluorescent.co/stiletto/readme/changelog) or learn how to [update your theme](https://help.fluorescent.co/stiletto/general/theme-updates).
{% endhint %}

Display collection tabs as multiple "Rows" or in a single row "Slider" on mobile devices.

{% columns %}
{% column %}

<div data-with-frame="true"><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2F2bnXUoiKeEoOuGSrLNP6%2Ffeatured-collection-slider.png?alt=media&#x26;token=fc249b5d-130f-4f0c-81f3-6701cd05b99e" alt=""><figcaption><p>Slider</p></figcaption></figure></div>
{% endcolumn %}

{% column %}

<div data-with-frame="true"><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FyeA8oMLe46WVnlUxEQsk%2Ffeatured-collection-rows.png?alt=media&#x26;token=72fa38fd-a0f5-4ff0-ba21-c6c155cd9de6" alt=""><figcaption><p>Rows</p></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

`Click section to find settings`

<table><thead><tr><th width="205">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Mobile layout</mark></td><td>Select <strong>Rows</strong> or <strong>Slider</strong> for collection list tabs at the top of the section.</td></tr></tbody></table>

## Change product list layout

***

Change the number of columns and rows, the shape of your product images, and set how many products to display from your collection.

<details>

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

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

1. Click on the **Featured collection slider** and scroll down to the **Product list** settings.
2. 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).
3. Select the **Number of columns** to display for both *desktop* and *mobile*.

   > The size of the product images will change according to the number of columns.
4. Click on the **Theme settings** tab to select an **Image aspect ratio**. This setting applies to all sections that display products.

   > Crop all images to **Square**, **Landscape**, or **Portrait**. The default **Natural** setting will display the original orientation of each image.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
5. Click **Save**.

</details>

`Click section to find settings`

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Maximum number of products</mark></td><td>Set the maximum number of products to display within in the section: between 3 and 15.</td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose how many products to show per row on desktop screens: either 3, 4, or 5 columns.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose how many collections to show per row on mobile screens: either 1 or 2 columns.</td></tr></tbody></table>

## Section header

***

The **Section header** appears above the section. Add a **Heading**, **Subheading**, and optional **Button**.

<details>

<summary><mark style="color:blue;"><strong>STEPS: Add headings and text</strong></mark></summary>

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

1. Click the **Featured collection slider** section to open the settings.
2. Enter **Heading** text to display as a title at the top of the banner.

   > we recommend one to three words.

   > Delete the text in this field to remove the heading.
3. Enter **Subheading** text to display beneath the heading.

   > We recommend two to three short sentences.

   > 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. Click **Save**.

</details>

<details>

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

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

1. Click the **Featured collection slider** section to open the settings.
2. Select or paste a URL for the **Button link**.
3. Enter text for the **Button label**.

   > 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)
4. Click **Save**.

</details>

`Click section to find settings`

<table><thead><tr><th width="150">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter text to display a section title above.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Enter text to display a section subheading below the heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr></tbody></table>

***

> **Related links**
>
> [Featured collection grid](https://help.fluorescent.co/stiletto/sections/theme-sections/featured-collection-grid)\
> [Product listing settings](https://help.fluorescent.co/stiletto/products/product-listings)\
> [Collection pages](https://help.fluorescent.co/stiletto/collection-pages/collection-pages)\
> [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/stiletto/sections/theme-sections/featured-collection-slider.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.