Grid item blocks

Blocks

These content blocks are modular elements designed to build a flexible section. Each block can be added, arranged, and styled independently to create rich storytelling experiences or drive user actions.

Image

Displays an image with adjustable width and padding.

Settings	Type	Description
Content
Image	image_picker	Select an image from the media library. Recommended size: 2000 × 1400px (.jpg). Includes a help link for image guidelines.
Image link	url	Optional URL. When set, the image becomes clickable and links to the specified destination.
Width	range	Controls the image width relative to its container. Range: 20%–100%, step: 5%. Default: 100%.
Padding
Bottom	range	Controls bottom spacing below the image. Range: 0–50px, step: 2px. Default: 0px.

Video

Embeds a video with configurable width and padding.

Settings	Type	Description
Content
Video	video	Upload or select a video from the media library to display inside the grid item.
Image	image_picker	Fallback image displayed if the video isn't loaded or supported.
Width	range	Controls the video width relative to its container. Range: 50%–100%, step: 5%. Default: 100%.
Padding
Bottom	range	Controls bottom spacing below the video. Range: 0–50px, step: 2px. Default: 0px.

Icon

Shows a built-in or uploaded icon with customizable size, color, heading, and supporting text.

Settings	Type	Description
Content
Icon	select	Select a predefined icon from the theme icon library. Default: icon-award Available options include: Award, Box, Chat, Check, Check circle, Cloud, Discount, Donation, Droplet, Email, Fast shipment, Gift, Heart, Leaf, Lightning, Location, Phone, Recycle, Shield, Star, Truck, Vegan, Washing machine, and more.
Alternative icon/image	image_picker	Upload a custom SVG icon instead of using the predefined icon set. Recommended size: 160 × 160px (.svg). Includes a help link for image guidelines.
Size	range	Controls the icon size. Range: 20–120px, step: 5px. Default: 40px.
Icon color	color	Sets the icon color. Alpha channel supported (RGBA transparency).
Text	richtext	Optional text displayed below or next to the icon.
Text size	select	Controls the size of the icon text. Default: body-medium Options: body-x-small — Extra small body-small — Small body-medium — Medium body-large — Large body-x-large — Extra large
Padding
Bottom	range	Controls bottom spacing below the icon block. Range: 0–50px, step: 2px. Default: 0px.

Heading

Displays a large headline or title within a slide or section.

Settings	Type	Description
Content
Text	textarea	Main heading text content. Default: Image slide
Heading size	select	Controls the visual size of the heading text. Options: Mini,Extra small, Small, Medium, Large, or Extra large.
Colors
Text	color	Sets the heading text color. Alpha channel supported (RGBA transparency).
Advanced
Heading SEO tag	select	Sets the semantic HTML tag H1-H6, or Automatic for SEO purposes.
Padding
Bottom	range	Controls bottom spacing below the heading. Range: 0–50px, step: 2px. Default: 8px.

Subheading

Displays a subheading text with bottom padding settings.

Settings	Type	Description
Content
Subheading	text	Subheading text displayed above or below the main heading. Default: Introducing
Colors
Text	color	Sets the subheading text color. Alpha channel supported (RGBA transparency).
Padding
Bottom	range	Controls bottom spacing below the subheading. Range: 0–50px, step: 2px. Default: 0px.

Rich text

Adds supporting or descriptive text beneath a heading.

Settings	Type	Description
Content
Text	richtext	Main rich text content area supporting formatted text (paragraphs, bold, links, etc.). Default: <p>Use this text area to tell your customers about your brand and vision. You can change it in the theme editor, and position it easily onto the grid.</p>
Text size	select	Controls paragraph text size. Applies only when the content in the Text field is set to Paragraph. Automatically generated by the base size. Default: body-large Options: body-x-small — Extra small body-small — Small body-medium — Medium body-large — Large body-x-large — Extra large
Colors
Text	color	Sets the rich text color. Alpha channel supported (RGBA transparency).

Single button

Inserts a single call-to-action (CTA) button.

Settings	Type	Description
Text	text	The label that appears on the button.
Link	url	Destination URL the button will link to.
Color	select	Visual style of the button: Primary, Secondary, Black, or White.
Size	select	Button size options: Small, Medium, or Large.
Style	select	Button appearance: Solid (filled), Outline (border only), or Text (no border).
Show arrow	checkbox	If checked, a right-pointing arrow icon appears next to the text.
Full-width	checkbox	Makes the button span the full width of its container.
Padding
Bottom	range	Padding below the section.

Side by side buttons

Adds two CTAs side by side, usually Primary and Secondary actions.

Settings	Type	Description
Primary/Secondary buttons
Text	text	Label displayed on the primary/secondary buttons.
Link	url	URL the primary/secondary buttons links to.
Color	select	Button color: Primary, Secondary, Black, or White.
Size	select	Button size: Small, Medium, or Large.
Style	select	Visual style: Solid, Outline, or Text.
Show arrow	checkbox	If checked, a right-arrow icon is shown on the buttons.
Padding
Bottom	range	Padding below the section.

Liquid

Insert custom Liquid code or HTML for advanced layouts or embeds.

Settings	Type	Description
Content
Custom code	liquid	Allows insertion of custom Liquid, HTML, CSS, or JavaScript code. The code renders directly inside the grid item. Default: <p>Once you write some custom code, it will render right here.</p>
Padding
Bottom	range	Controls bottom spacing below the Liquid block. Range: 0–50px, step: 2px. Default: 0px.