Grid

Create a grid of customizable blocks of different sizes. The grid section is a great way to break up the look of your page and set apart your store.

Section Settings

• Layout: Set the height for the desktop view using the desktop height option. To use a different height on mobile devices, toggle enable mobile height on, then specify the desired value using the mobile height setting.

• Text: Adjust text appearance by scaling the heading size from 50% to 200% and the text size from 70% to 150%

• Buttons: Customize primary and secondary buttons independently by selecting the button color, style, and size to small, medium, or large.

• Mobile: On mobile, you can enable a horizontal slider for scrolling, set the number of items per row to either 1 or 2, and toggle the option to overlay text directly on images.

Using one 33% and one 66% wide block will fill out a row perfectly.

Blocks

In the section settings, you’ll find common options like button colors and styles. However, this section's uniqueness lies in its versatile blocks and their settings. Available block types:

• Collection: The collection block allows you to display a featured collection with an optional image, configurable width, support for text, a subheading, and a single button, along with adjustable overlay opacity and text positioning.

• Product: A featured product with pricing, configurable width, and support for a title, subheading, description, button, and overlay settings.

• Image: Show a static image with optional text and buttons, supports two buttons with independent links, and offers fully customizable overlay, text position, and width.

• Text: A purely textual content block that includes a subheading, heading, description, and buttons, making it perfect for promotional messages, announcements, or callouts.