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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/pages/templates/collections-list-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.