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
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):
Click on Collection list grid and scroll down to the Collection listing settings.
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.
Set the Collection listing title style to Overlay the image or position it Beneath the image.
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.
Click Save.
Click section to find settings
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
Last updated