Skip to content
Collection list grid
Section overview
The Collection list grid Documentation section displays a customizable grid of collection cards, allowing merchants to showcase multiple collections in an organized layout.
Common use cases
- Highlighting featured or seasonal collections on the homepage
- Creating a collection directory or catalog page
- Showcasing specific product categories for different customer segments
- Building promotional landing pages with mixed content
Usage tips
- For optimal visual balance, use 3-4 collections per row on desktop
- Add content blocks between collections to break up the grid and highlight promotions
- Consider using the split layout option for stores with many collections to keep the header visible
- On mobile, reduce to 1-2 collections per row to ensure images remain large enough for comfortable viewing
Section settings
| Setting | Description |
|---|---|
| Collection | Select collections to display in the grid |
| Heading | Add a title for the section |
| Content | Add descriptive text to provide context |
| Button label | Text to display on the optional button |
| Button URL | URL where the button links to |
| Top spacing | Adjust the padding above the section (0-300px) |
| Bottom spacing | Adjust the padding below the section (0-300px) |
| Color scheme | Select a predefined color scheme or use a custom color |
| Custom color | Set a custom background color when "Custom" is selected |
| Text color | Choose default, force light, or force dark text |
| Border color | Select subtle or strong border styling |
| Button color | Choose from various button style options |
| Enable color fade | Enables background color transition when scrolling |
| Border position | Choose where borders appear (none, top, bottom, or both) |
| Desktop columns | Number of columns per row on desktop (1-8) |
| Mobile columns | Number of columns per row on mobile (1-3) |
| Horizontal alignment | Align section content left, center, or right |
| Enable margin | Apply horizontal margin to the section |
| Enable split | Divide the section into a header area and content area |
| Enable split heading | Apply split layout to the section heading |
| Visibility | Control section visibility on mobile, desktop, or both |
Block settings
Content block
Content blocks allow you to add text, buttons, images, or videos between collection cards in the grid. Limited to 20 blocks per section.
| Setting | Description |
|---|---|
| Heading | Block title text |
| Content | Rich text content for the block |
| Button label | Text for the optional button |
| URL | Destination for the button click |
| Image | Upload an image to display in the block |
| Show image as background | Use the image as a background instead of inline |
| Video | Upload or link a video for the block |
| Enable autoplay | Automatically play the video when visible |
| Enable mute toggle | Show a button to toggle sound on/off |
| Enable loop | Continuously replay the video |
| Minimum height | Set the minimum block height (0-500px) |
| Enable padding | Add internal spacing within the block |
| Color scheme | Select a predefined color scheme for the block |
| Border color | Choose subtle, strong, or no border |
| Text color | Set default, light, or dark text color |
| Button color | Select from various button styles |
| Enable gradient | Add a gradient overlay to the block |
| Text position | Place text above or below the image/video |
| Vertical alignment | Align content to top, middle, or bottom |
| Horizontal alignment | Align content left, center, justified, or right |
| Row span | Number of rows the block occupies (1-6) |
| Column span | Number of columns the block occupies (1-6) |