> 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/stiletto/sections/theme-sections/featured-collection-slider.md).

# 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](/stiletto/sections/theme-sections/featured-collection-grid.md) to display your collections in multiple rows with adjustable columns.

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

### <mark style="color:$primary;">Select featured collection</mark>

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>

<sub><mark style="color:$info;">Click blocks to find settings<mark style="color:$info;"></sub>

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

### <mark style="color:$primary;">Collection tabs layout</mark>

{% hint style="info" %}
Tab layout options were added in v5.2.0. View the [changelog](/stiletto/readme/changelog.md) or learn how to [update your theme](/stiletto/general/theme-updates.md).
{% 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="/files/XStxkbiegWxj7sFktwZ9" alt=""><figcaption><p>Slider</p></figcaption></figure></div>
{% endcolumn %}

{% column %}

<div data-with-frame="true"><figure><img src="/files/qm6NqLyqa8FZgI8KLTmV" alt=""><figcaption><p>Rows</p></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

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

### <mark style="color:$primary;">Product list layout</mark>

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.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
5. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

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

***

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