Icon grid

Section overview

The Icon Grid section displays a customizable grid of icon cards with text content. It allows merchants to showcase features, benefits, or services with visual elements.

Common Use Cases

• Highlighting product features or benefits

• Showcasing services or offerings

• Creating feature comparison grids

• Displaying brand values or commitments

Usage Tips

• Use consistent icon sizes for a clean, professional appearance

• Keep text content concise for better readability

• Consider using the split layout option for sections with longer headings or content

• For mobile, reduce the number of columns to ensure content remains readable

Section Settings

Setting	Description
Heading	The main heading for the section
Content	The descriptive text for the section
Button label	Text displayed on the button
Button URL	The URL where the button links to
Top spacing	Amount of space above the section (0-300px)
Bottom spacing	Amount of space below the section (0-300px)
Color scheme	The background color scheme for the section
Custom color	Custom background color when "Custom" color scheme is selected
Text color	Override for the text color
Border color	Color of the section border
Button color	Style and color for the section button
Enable color fade	Enable background color transition when scrolling
Border position	Position of the section border (none, top, bottom, or both)
Desktop columns	Number of columns to display on desktop devices (1-8)
Mobile columns	Number of columns to display on mobile devices (1-4)
Content alignment	Horizontal alignment of the section content
Enable margin	Enable horizontal margin on the section
Enable split	Split the section into a header area and content area
Enable split heading	Allow heading to span full width in split layout
Visibility	Control section visibility on different device types

Block Settings

Icon

The Icon block allows you to add individual icon cards to the grid. Each block can have its own icon, heading, and content.

Block limit: 20

Setting	Description
Icon	The image to display as the icon (recommended 256px square)
Size	Size of the icon (small, normal, or large)
Heading	The heading text for this icon card
Content	The descriptive text for this icon card
Enable padding	Add padding inside the icon card
Color scheme	Background and text color scheme for this icon card
Border color	Color of the border around this icon card
Alignment	Vertical or horizontal alignment of icon and text
Content alignment	Horizontal alignment of the content within the card
Row span	Number of rows this card should span (1-6)
Column span	Number of columns this card should span (1-6)