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

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