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
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
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)
Last updated
Was this helpful?