> 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/sections/theme-sections/collection-list-grid.md).

# Collection list grid

The **Collection list grid** section displays a grid of all or selected collections. See the Collection list slider to display your collections as a rotatable carousel in one row.

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Collection list grid**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Collection list</h2>

***

### <mark style="color:$primary;">Set up collections</mark>

In the section settings, under **Collection listing**, and use the **Select collections** button to choose a list the collections you want to feature in the grid.

{% hint style="info" %}
We recommend adding a **Collection image** in your Shopify Admin. If no image is set, Stiletto will use a product image from that collection by default.
{% endhint %}

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

Change the layout and style of the collection items.

* Change the **number of columns**
* Select the **image aspect ratio**
* Change the **Title size** and **Title style**

<details>

<summary><mark style="color:$primary;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on **Collection list grid** and scroll down to the **Collection listing** settings.
2. To make your collection images a uniform shape and size, select a **Collection listing aspect ratio** to crop all images to **Square**, **Landscape**, or **Portrait**.

   > The default **Natural** setting will display the original orientation of each image.

   <img src="/files/RFmWGT0O4EPQmXP8F5si" alt="" width="375">
3. Set the **Collection listing title style** to **Overlay** the image or position it **Beneath** the image.
4. For the **Overlay** title style, set the **Background style** to a **Solid** color or a **Gradient**.

   > Use the color selectors to change the **Overlay title background** and **Overlay title** color.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
5. Click **Save**.

</details>

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

<table><thead><tr><th width="244.15057373046875">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Choose the number of collections to show in each row for desktop.<br><br>The size of the collection images will change according to the number of columns.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Choose the number of collections to show in each row for mobile.</td></tr><tr><td><mark style="color:blue;">Collections list</mark></td><td>Select the collections to display in the grid.</td></tr><tr><td><mark style="color:blue;">Collection listing aspect ratio</mark></td><td>Crop the shape of your collection images to <strong>Square</strong>, <strong>Landscape</strong>, or <strong>Portrait</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Collection listing title style</mark></td><td>Choose to <strong>Overlay</strong> the collection title over the collection image or display the title <strong>Beneath</strong> the image.</td></tr><tr><td><mark style="color:blue;">Overlay title background style</mark></td><td>Select the color behind the collection title to <strong>Solid</strong> or <strong>Gradient</strong> when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay color scheme</mark></td><td>Select the color scheme to apply the 'Background' or 'Background Gradient' color. Learn more about <a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">using color schemes</a>.</td></tr></tbody></table>

***

> **Related links**
>
> [Collection list slider](/stiletto/sections/theme-sections/collection-list-slider.md)\
> [Collection list page](/stiletto/pages/templates/collections-list-page.md)\
> [Featured collection grid](/stiletto/sections/theme-sections/featured-collection-grid.md)\
> [Featured collection slider](/stiletto/sections/theme-sections/featured-collection-slider.md)