Collection Grid Section
Use this section to display products from a selected collection in a responsive grid layout.
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"
Section Placement
This section cannot be added to header or footer areas.
Configuration 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 |
Best Practices
- Use 4 products per row for balanced layouts
- Add 2 rows to show 8 products total
- Include "View all" CTA to drive traffic to full collection
- Test on mobile with 2 columns
Homepage Usage
Perfect for featuring new arrivals, bestsellers, or seasonal collections on your homepage. Limit to 8-12 products for optimal loading speed.