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

## 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](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

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

Click the section change general **section styles**.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Padding and divider</strong></mark></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Animation</strong></mark></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-animations">/pages/nxNcI6zBaofEs4kObMMf#section-animations</a></td><td></td></tr></tbody></table>

&#x20;

## Select feature collections

***

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>

### Collections list style

***

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.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
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>

&#x20;&#x20;

`Click Collection list slider section to find settings`

<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;">Collection listing aspect ratio</mark></td><td>Crop the shape of your collection images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Collection listing title style</mark></td><td>Choose to Overlay the collection title over the collection image or display the title Beneath the image.</td></tr><tr><td><mark style="color:blue;">Overlay title background style</mark></td><td>Select the color behind the collection title to Solid or Gradient when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay title</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>

&#x20;

## Section header

***

The **Section header** appears above the main content. Click the section to find the header settings

* Add a **heading** and **subheading.**&#x20;
* Add optional **button link**
* To remove the section header, delete any text in these fields

`Click the section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</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>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Heading alignment</mark></td><td>Position heading text to the <strong>Left</strong> or <strong>Center</strong> above section content.</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>

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


---

# 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/collection-list-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.