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
Use it to feature new arrivals, bestsellers, or seasonal collections on your homepage. Keep the selection focused and test loading performance with your own images, apps, and storefront configuration.