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)