Product grid

Section Overview

The Product grid section displays a collection of products in a customizable grid layout with optional header content and content blocks. It allows merchants to showcase products with flexible layout options including split-view layouts and grid configurations.

Common Use Cases

• Featuring products from a specific collection on homepage or landing pages

• Creating a product showcase with accompanying promotional content

• Building category pages with filterable product displays

• Creating a featured products section with supplementary content blocks

Usage Tips

• The split layout option works best when you have compelling header content to display alongside products

• For mobile displays, consider using a single column layout for better product visibility

• Customize grid density based on the size and complexity of your product images

• Use the content block strategically to add context or promotional messaging within the product grid

• Ensure your collection has enough products to fill the grid properly; consider product count settings based on available products

Section Settings

Setting	Description
Collection	Select which product collection to display
Products count	Set the maximum number of products to display
Heading	Main heading for the section
Content	Rich text content displayed in the section header
Button label	Text for the optional button
Button URL	URL destination for the button
Top spacing	Amount of spacing above section (in pixels)
Bottom spacing	Amount of spacing below section (in pixels)
Color scheme	Background and text color theme for the section
Border color	Color of the section border
Border position	Position of borders around the section
Desktop columns	Number of product columns on desktop devices
Mobile columns	Number of product columns on mobile devices
Horizontal alignment	Horizontal alignment of section content
Enable margin	Enable horizontal margin based on theme settings
Enable split	Enable split layout with header on left and products on right
Visibility	Device visibility settings (all, mobile-only, or desktop-only)

Block Settings

Content Block

This block adds a content component within the product grid that can include text, images, or video. Limited to 1 per section.

Setting	Description
Heading	Block heading text
Content	Rich text content for the block
Button label	Text for the optional button
URL	URL destination for the button
Image	Main image for the content block
Background image	Background image for the content block
Video	Video file for the content block
Enable autoplay	Auto-play video when in view
Enable mute toggle	Show mute/unmute button for video
Enable loop	Loop video playback
Minimum height	Minimum height of the content block (in pixels)
Enable padding	Add internal padding to the content block
Color scheme	Background and text color theme for the block
Text color	Force specific text color regardless of color scheme
Border color	Color of the block border
Button style	Style and color of the button
Enable gradient	Add gradient effect to background
Vertical alignment	Vertical alignment of content within block
Horizontal alignment	Horizontal alignment of content within block
Text position	Position of text relative to media (above or below)