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

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to change general **section styles**.

<table data-view="cards" data-full-width="false"><thead><tr><th align="center"></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 align="center"><mark style="color:blue;"><strong>Padding and divider</strong></mark></td><td><a href="../using-sections#section-padding">#section-padding</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Animation</strong></mark></td><td><a href="../using-sections#section-animations">#section-animations</a></td><td></td></tr></tbody></table>

### Select feature collections

***

Select multiple **Collections** to display in a grid with featured collection images that link to those collections.

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.

<details>

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

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

1. Click on **Collection list grid** to open the section settings.
2. Under the **Collection listing**, use the **Select collections** button to check off all the collections you want to feature in the grid.
3. Select the **Number of columns** for both *desktop* and *mobile*

   > The size of the collection images will change according to the number of columns.
4. In the **Collection list**, click and hold the drag-and-drop handles **`⋮⋮`** to reorder your collections.
5. Click **Save**.

</details>

## Change collection list style

***

Choose the shape of the collection images, and change the position, style, and colors of the titles.

<details>

<summary><mark style="color:blue;"><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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
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>

&#x20;

`Click Collection list grid section to find settings`

<table><thead><tr><th width="263">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.</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 Square, Landscape, or Portrait. Choose Natural to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Collection listing title style</mark></td><td>Choose to Overlay the collection title over the collection image or display the title Beneath 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 Solid or Gradient when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay title</mark></td><td>Select the color of the collection title when set to the Overlay style.</td></tr><tr><td><mark style="color:blue;">Overlay title background</mark></td><td>Select the color behind the collection title when set to the Overlay style.</td></tr></tbody></table>

&#x20;

## Section header

***

The **Section header** appears above the main content. Click the section to find the header settings

* Add a **heading** and **subheading.**&#x20;
* Add optional **button link**
* To remove the section header, delete any text in these fields

`Click the section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr></tbody></table>

***

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