Skip to content
Collection list grid
Section overview
The Collection list grid Section displays a curated grid of collection cards, allowing merchants to showcase multiple collections in a visually appealing layout.
Common Use Cases
- Featuring seasonal or thematic collections on the homepage
- Creating category navigation areas on landing pages
- Highlighting new or promotional collections
- Building a visual directory of product categories
Usage Tips
- Use the split layout option for more engaging designs when you have compelling section copy
- Adjust the number of columns based on the number of collections you want to display
- Consider adding content blocks to break up the grid and include promotional messages
- For mobile optimization, limit to 1-2 collections per row to ensure good visibility
- Use consistent collection images with similar aspect ratios for a cohesive grid layout
Section Settings
| Setting | Description |
|---|---|
| Collection | Select collections to display in the grid |
| Heading | Main heading text for the section |
| Content | Rich text content displayed below the heading |
| Button label | Text for the optional call-to-action button |
| Button URL | URL the button links to when clicked |
| Top spacing | Controls padding above the section (0-300px) |
| Bottom spacing | Controls padding below the section (0-300px) |
| Color scheme | Sets the background and text color theme |
| Border color | Determines the color of section borders |
| Button color | Controls the style and color of buttons in the section |
| Border position | Sets where borders appear (top, bottom, both, or none) |
| Desktop columns | Number of columns to display on desktop (1-8) |
| Mobile columns | Number of columns to display on mobile (1-3) |
| Horizontal alignment | Controls horizontal alignment of section content |
| Enable margin | Toggles horizontal margin on the section |
| Enable split | Enables split layout with header on the left and grid on the right |
| Visibility | Controls section visibility on different device types |
Block Settings
Content Block
This block type adds custom content cards within the collection grid, useful for promotional messages or special announcements.
Block limit: 20
| Setting | Description |
|---|---|
| Heading | Title text for the content block |
| Content | Rich text content for the block |
| Button label | Text for the optional call-to-action button |
| URL | Link destination for the block |
| Image | Primary image to display in the block |
| Image background | Background image for the block |
| Video | Optional video to display in the block |
| Enable autoplay | Automatically plays video when in view |
| Enable mute toggle | Shows mute/unmute controls for videos |
| Enable loop | Continuously loops video playback |
| Minimum height | Sets the minimum height of the block (0-500px) |
| Enable padding | Toggles padding inside the block |
| Color scheme | Sets the background and text color theme for the block |
| Text color | Controls the color of text content |
| Border color | Determines the color of block borders |
| Button color | Controls the style and color of the button |
| Enable gradient | Adds a gradient overlay to the block |
| Vertical alignment | Controls vertical alignment of block content |
| Horizontal alignment | Sets horizontal alignment of block content |
| Text position | Places text either above or below the media content |
| Row span | Number of rows the block spans in the grid (1-6) |
| Column span | Number of columns the block spans in the grid (1-6) |