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

* Choose to display all or only selected collections.
* Adjust the layout of the grid
* Change the style of the collection titles and backgrounds
* Customize the images, including their shape and size

## 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>4</strong><br><strong>5</strong><br><strong>6</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>2</strong><br><strong>3</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>Show all rows</strong><br><strong>1 - 5</strong></td></tr></tbody></table>

## Set up collection items

***

Click the **Collections list page** to customize the style of the collection items.

* Choose the **style** of collection items
* Display **product counts**
* Change the title font and alignment.

`Click Collection list page section to find settings`

<table><thead><tr><th width="206">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show product counts</mark></td><td>Show the total number of products in the collection.</td></tr><tr><td><mark style="color:blue;">Style</mark></td><td>Display collection items as <strong>Filled</strong> (color tiles), <strong>Outlined</strong>, or <strong>Plain</strong>.</td></tr><tr><td><mark style="color:blue;">Title font</mark></td><td>Set the title font to the <strong>Body</strong> or <strong>Heading</strong> font as set in your theme settings.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Position the text within collection items: either <strong>Left, Center</strong>, or <strong>Right</strong>.</td></tr></tbody></table>

## Customize collection images

***

By default, the collection image will be used. If no collection image is set, the first product's image will be used.

* Select an **image source**
* Adjust the **image spacing on desktop**

{% 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**.
{% 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><tr><td><mark style="color:blue;">Desktop image spacing</mark></td><td>Adjust the space around images within the collection items.</td><td><strong>0 - 40px</strong></td></tr></tbody></table>

### Change image shape

***

Change the **aspect ratio** to crop images to be a uniform shape, and display images as **circles**.

{% 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="160">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><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><tr><td><mark style="color:blue;">Apply circle crop to images</mark></td><td>Enable to display square images as cropped circles.<br><br>Only applies when the aspect ratio is "Square".</td><td></td></tr></tbody></table>

\\

***

> **Related links**
>
> [Templates](https://help.fluorescent.co/cornerstone/pages/templates)