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)