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)