Grid
Last updated
Last updated
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.
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.
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.
