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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/stiletto/sections/theme-sections/collection-list-grid.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.