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

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.

Editing templates change all pages that use that template. For unique pages, use new templates or dynamic metafields

Section style guides

Section header

Section colors

Section width

Padding and divider

---

Collection list

---

Set up collections

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.

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.

Collection list style

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

STEPS

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.

   
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 when matching colors to make sure your text is clear and readable for everyone.

5. Click Save.

_{Click section to find settings}

Setting	Description
Number of columns on desktop	Choose the number of collections to show in each row for desktop. The size of the collection images will change according to the number of columns.
Number of columns on mobile	Choose the number of collections to show in each row for mobile.
Collections list	Select the collections to display in the grid.
Collection listing aspect ratio	Crop the shape of your collection images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.
Collection listing title style	Choose to Overlay the collection title over the collection image or display the title Beneath the image.
Overlay title background style	Select the color behind the collection title to Solid or Gradient when set to the Overlay style.
Overlay color scheme	Select the color scheme to apply the 'Background' or 'Background Gradient' color. Learn more about using color schemes.

---

Related links

Collection list slider Collection list page Featured collection grid Featured collection slider