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

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FadOCzSwYybQpwY8hh9x0%2Fcollections-list.jpeg?alt=media\&token=fb21a1d0-5dc5-4966-af74-6ed37861c505)

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

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

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

## Change collection title style

***

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="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-71ff8b064b5e0b86d3d64578312d0bea253f8cce%2Fcollections-list-overlay.jpeg?alt=media" alt="Overlay title style"> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-27cca8de01b3ee0bab763444d9ba275110d18929%2Fcollections-list-solid.jpeg?alt=media" alt=""><figcaption><p>Solid overlay background</p></figcaption></figure></div>

`Click Collection list page section to find settings`

<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](https://help.fluorescent.co/stiletto/pages/templates)