Skip to content
Collection list grid
Section overview
The Collection Grid section displays a responsive grid of collection cards, allowing merchants to showcase multiple product collections with customizable layout options and visual styling.
Common use cases
- Featuring popular or seasonal collections on the homepage
- Creating category navigation pages with visual collection thumbnails
- Highlighting new product lines or special collections
- Building landing pages with themed collection groupings
Usage tips
- Customize the grid layout to match your store's design aesthetic
- Include a descriptive heading and content to provide context for the collections
- Consider mobile responsiveness by setting appropriate column counts for different devices
- Use the card block to highlight a special offer or promotion alongside collections
- Ensure collection images have consistent dimensions for a uniform grid appearance
- For best visual balance, limit the number of collections to what fits comfortably in your 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 | Link destination for the call-to-action button |
| Spacing top | Controls the top padding in pixels (0-300px) |
| Spacing bottom | Controls the bottom padding in pixels (0-300px) |
| Color scheme | Sets the background color and text color |
| Border color | Sets the color of section borders |
| Button color | Determines the color and style of the button |
| Border position | Sets where borders appear (none, top, bottom, or both) |
| Desktop columns | Number of columns to display on desktop devices (2-5) |
| Mobile columns | Number of columns to display on mobile devices (1-2) |
| Horizontal alignment | Controls how content aligns horizontally (left, center, right) |
| Visibility | Controls device visibility (all devices, mobile only, desktop only) |
| Show collection size count | Toggles display of product count for each collection |
Block settings
Card
A customizable content card that can be used to highlight special offers or promotions alongside collection items.
Block limit: 1
| Setting | Description |
|---|---|
| URL | Link destination for the card |
| Heading | Main heading text for the card |
| Content | Rich text content displayed in the card |
| Button label | Text for the optional call-to-action button |
| Image | Primary image displayed in the card |
| Background image | Secondary image displayed as the card background |
| Video | Optional video to display in the card |
| Enable autoplay | Toggles automatic video playback |
| Enable mute toggle | Shows or hides a button to toggle video sound |
| Enable loop | Controls whether the video plays on a loop |
| Background color scheme | Sets the card's background and text colors |
| Border color | Sets the color of card borders or removes them |
| Button color | Determines the color and style of the card's button |
| Column span | Number of grid columns the card should occupy (1-4) |