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

# Collection list page

The **Collections list template** provides the layout and design of the **`/collections`** page that displays your store's collections in a grid. Use this page to give customers an overview of all or selected collections.

## Customize page style

***

Click the page section to edit the **general styles**, available for all page templates:

<table data-view="cards"><thead><tr><th></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><strong>Color scheme</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td><a href="/files/OZ4h4v0qfTnncw43MKk6">/files/OZ4h4v0qfTnncw43MKk6</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td><a href="/files/lMLsRWOpgxDLC0CvtnAt">/files/lMLsRWOpgxDLC0CvtnAt</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td><a href="/files/3ddmAtuVNo9MtYTf38ov">/files/3ddmAtuVNo9MtYTf38ov</a></td></tr></tbody></table>

### Page header

***

Choose to show the **Page title** and add optional **Text** below the title.

`Click Collection list page section to find settings`

<table><thead><tr><th width="199">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show page title</mark></td><td>Display the title of the collection list page.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of rich text to describe the page.</td></tr></tbody></table>

## Select collections to show

***

By default, the **Collection list** shows all published collections. You can choose to display only **Selected** collections. To customize your list, choose 'Selected' and add collection to the collection list.

{% hint style="success" %}
Collections are created and edited in your Shopify admin. See Shopify's [Collections manual](https://help.shopify.com/en/manual/products/collections) to learn how to group products into collections.
{% endhint %}

`Click Collection list page 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;">Collection to show</mark></td><td>Choose which collections to display on the page.</td><td><strong>All</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Selected</strong></td></tr></tbody></table>

## Change layout

***

Change the number of columns to display for desktop and mobile screens.

`Click Collection list page 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;">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><br><strong>4</strong> <em><mark style="background-color:yellow;">Default</mark></em></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><tr><td><mark style="color:blue;">Number of rows on desktop</mark></td><td>Set the number of rows to display on desktop.</td><td><strong>3-10</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 5</mark></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 %}

`Click Collection list 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" %}
The **aspect ratio** of an image is the proportion between its **w**idth and **h**eight (w:h). A square image has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2).
{% endhint %}

`Click Collection list section to find settings`

<table><thead><tr><th width="147">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>

### Add image overlay

***

The image **overlay** adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

* Choose a **Color scheme** for the overlay and overlay text
* Change the **Opacity** to make the overlay more or less transparent

`Click Collection list 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;">Overlay opacity</mark></td><td>Use the slider to change the transparency of the overlay.</td><td><strong>0 - 100%</strong><br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20%</mark></td></tr></tbody></table>