Collection Grid Section
This guide describes setting up the Collection Grid section.
Set up a Collection Grid section
To set up a Collection Grid section:
- Go to Customize theme
- In Theme editor, select the page where you want to add the Collection Grid
- Select "Add section" > "Collection grid"
Note: The section cannot be added to header or footer areas.
From the side menu, select Collection Grid to configure the following settings:
| Setting name | Description |
|---|---|
| Collection | Select the collection to display in the grid |
| Title display | Choose text size for the collection title, from XS to 7XL, with responsive options. Default is "2XL / desktop 4XL" |
| Title alignment | Position the title left or right. Default is left |
| Call to action text | Enter text for the CTA button. Default is "View all" |
| CTA display | Set the text size for CTA, from XS to 2XL. Default is "text-base" |
| CTA alignment | Position the CTA left or right. Default is right |
| Products per row | Choose number of products to display per row (2-5). Default is 4 |
| Products per row (mobile) | Select 1 or 2 products per row on mobile. Default is 2 |
| Rows | Set number of rows to display (1-5). Default is 2 |
| Horizontal spacing | Add space between products (0-100px). Default is 0px |
| Vertical spacing | Add space between product rows (0-100px). Default is 0px |
| Horizontal spacing size | Choose "None" or "Small" padding. Default is none |
| Section padding | Adjust top and bottom padding (0-100px). Default is 0px |
| Horizontal section padding | Set desktop padding (0-20px). Default is 0px |
| Mobile horizontal padding | Enable/disable padding on mobile devices |
| Color scheme | Select a color scheme to match your store's design |
| Indent section | Add left and right edge indentation when enabled |