> 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/collection-list-slider.md).

# Collection list slider

The **Collection list slider** section displays a single-row carousel of all or selected collections. See the Collection list grid 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 **Collection list 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 %}

***

<h2 align="center">Collection list</h2>

***

### <mark style="color:$primary;">Select feature collections</mark>

Select multiple **Collections** to display in a grid with featured collection images that link to those collections.

We recommend adding a **Collection image** in your Shopify Admin. If no image is set, Stiletto will use a product image from that collection by default.

<details>

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

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

1. Click on **Collection list slider** to open the settings.
2. Under the **Collection listing**, use the **Select collections** button to check off all the collections you want to feature in the slider.
3. Select the **Number of columns** to display within the slider for both *desktop* and *mobile.*

   > The size of the collection images will change according to the number of columns.
4. In the **Collection list**, click and hold the drag-and-drop handles **`⋮⋮`** to reorder your collections.
5. Click **Save**.

</details>

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

Choose the shape of the collection images, and change the position, style, and colors of the titles.

<details>

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

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

1. Click on **Collection list slider** and scroll down to the **Collection listing** settings.
2. To make your collection images a uniform shape and size, select a **Collection listing aspect ratio** to crop all images to **Square**, **Landscape**, or **Portrait**.

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

   <img src="/files/RFmWGT0O4EPQmXP8F5si" alt="" width="375">
3. Set the **Collection listing title style** to **Overlay** the image or position it **Beneath** the image.
4. For the **Overlay** title style, set the **Background style** to a **Solid** color or a **Gradient**.

   > Use the color selectors to change the **Overlay title background** and **Overlay title** color.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
5. Click **Save**.

</details>

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

<table><thead><tr><th width="263">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose the number of collections to show in each row for desktop.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose the number of collections to show in each row for mobile.</td></tr><tr><td><mark style="color:blue;">Collections list</mark></td><td>Select the collections to display in the grid.</td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Crop the shape of your collection images to <strong>Square</strong>, <strong>Landscape</strong>, or <strong>Portrait</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Title style</mark></td><td>Choose to <strong>Overlay</strong> the collection title over the collection image or display the title <strong>Beneath the image</strong>.</td></tr><tr><td><mark style="color:blue;">Overlay title background style</mark></td><td>Select the color behind the collection title to <strong>Solid</strong> or <strong>Gradient</strong> when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay color scheme</mark></td><td>Select the color of the collection title when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay title background</mark></td><td>Select the color behind the collection title when set to the Overlay style.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Collection list grid](/stiletto/sections/theme-sections/collection-list-grid.md)\
> [Collection list page](/stiletto/pages/templates/collections-list-page.md)\
> [Featured collection grid](/stiletto/sections/theme-sections/featured-collection-grid.md)\
> [Featured collection slider](/stiletto/sections/theme-sections/featured-collection-slider.md)