# Collection list

The **Collection list** section displays collections in a **Grid** or **Slider** layout. 

* Select which collections you want to show with their featured image and title.
* Customize the appearance and aspect ratio of the collection images.

<figure><img src="/files/awhYMlK1Q15qw5b4fAFI" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

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

Click the section to add a **section header** and change **section styles** for colors and spacing.

<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>Section header</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-header">/pages/3wq6hFMr3k1BDOHIgjqZ#section-header</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Width and Padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr></tbody></table>

## Select collections to show

***

Select a list of your collections to show. For each collection, the section displays a tile with an image and title.

&#x20;

`Click Collection list section to find settings:`

<table><thead><tr><th width="155">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Collection</mark></td><td>Click <strong>Select collections</strong> to choose which of your collections to show in the section.</td></tr></tbody></table>

## Use grid or slider layout

***

Display collections in a **Grid** or single-row **Slider**. Then choose the **Number of columns** to display in one row.

&#x20;

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="385">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Layout</mark></td><td>Display collection list items in multiple rows or in a single row that visitors can rotate through.</td><td><strong>Slider</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Grid</strong></td></tr><tr><td><mark style="color:blue;">Show slider scrollbar</mark></td><td>When checked, the scrollbar appears below the collections and allows visitors to move through the slider.</td><td></td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of collections per row on desktop screens.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>4</strong></td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of collections per row on mobile screens.</td><td><strong>1</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>2</strong></td></tr></tbody></table>

## Set up collection images

***

Choose which images to use for the collection items. By default, the collection image will be used. If no collection image is set, the first product's image will be used.

{% hint style="success" %}
To change the collection image, go to **Products > Collections** in your Shopify admin. Click the name of the collection, then click **Add image** or **Edit > Add image**.
{% endhint %}

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors">/pages/3wq6hFMr3k1BDOHIgjqZ#overlay-colors</a></td><td><a href="/files/r6qvEikOKVMq5Hv30JkJ">/files/r6qvEikOKVMq5Hv30JkJ</a></td></tr></tbody></table>

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image source</mark></td><td>Choose which image to display for the collection list items.</td><td><strong>First product image</strong><br><strong>Collection image</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr></tbody></table>

### Change image aspect ratio

***

Change the **aspect ratio** to crop images to be a uniform shape.

{% hint style="info" %}
An image's **aspect ratio** is the proportion between its **w**idth and **h**eight (w:h). A square has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2).
{% endhint %}

&#x20;

`Click section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Select an <strong>aspect ratio</strong> to crop images to be a uniform shape, or select <strong>Natural</strong> to display images in their original shape.</td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>


---

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