# 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="../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</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>