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

# Collections list

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.

<img src="/files/A8dK0RSQyZyuiv7TwX61" alt="" width="563">

<h2 align="center">Set up collections</h2>

***

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 %}

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

<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;">Select collections 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>

<h2 align="center">Page layout</h2>

***

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

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

<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>3</strong><br><strong>4</strong><br><strong>5</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><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></td></tr></tbody></table>

### <mark style="color:$primary;">Change image aspect ratio</mark>

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 %}

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

<table><thead><tr><th width="165">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>Square (1:1)</strong><br><strong>Landscape (3:2)</strong></td></tr></tbody></table>

### <mark style="color:$primary;">Collection title style</mark>

Customize the position and style of the collection title.

* Set the **Collection listing title style** to **Overlay** or **Beneath**.
* Set the **Collection title background style** to **Solid** or **Gradient**.

<div><img src="/files/1kZAx277VTJxwkOftp48" alt="Overlay title style"> <figure><img src="/files/Z5RvrJuJaw9wmxJXT9vK" alt=""><figcaption><p>Solid overlay background</p></figcaption></figure></div>

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

<table><thead><tr><th width="253">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Collection listing title style</mark></td><td>Select the number of collections per row on desktop screens.</td></tr><tr><td><mark style="color:blue;">Overlay title background style</mark></td><td>For overlay style, display a <strong>Solid</strong> or <strong>Gradient</strong> color background.</td></tr><tr><td><mark style="color:blue;">Overlay title</mark></td><td>Set the color of the collection title.</td></tr><tr><td><mark style="color:blue;">Overlay title background</mark></td><td>Set the background color of the collection title.</td></tr></tbody></table>

***

> **Related links**
>
> [Templates](/stiletto/pages/templates.md)