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

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

Settings	Type	Description
Layout
Desktop height	select	Sets the height of the grid section on desktop devices.
Enable mobile height	checkbox	Enables a custom height setting for mobile devices.
Mobile height	select	Sets the height of the grid section on mobile devices.
Text
Heading size	range	Adjusts the font size of the heading text within the grid section.
Text size	range	Adjusts the font size of the paragraph or body text within the grid section.
Buttons
Button color	select	Select the button color: White, Black, Primary, or Secondary.
Button style	select	Choose the visual style of the primary button: Solid, Outline, Soft, and etc.
Size	select	Sets the size of the primary button: Small, Medium, or Large.
Secondary button color	select	Selects the color theme for the secondary button:White, Black, Primary, or Secondary.
Button style	select	Choose the visual style of the secondary button:Solid, Outline, Soft, and etc.
Size	select	Sets the size of the secondary button: Small, Medium, or Large.
Colors
Background	color	Sets the background color for the entire grid section.
Overlay gradient	color_background	Adds a gradient overlay on top of the background.
Mobile
Enable slider	checkbox	Enables slider functionality, allowing grid items to scroll horizontally like a carousel.
Items per row	select	Determines how many grid items are displayed per row on desktop: 1 or 2.
Overlay text on images	checkbox	Displays text over the images instead of below them.
Section spacing
Width	select	Controls the overall content width of the section: Full width, Page width, Full width padded, Page width narrow.
Add spacing	checkbox	Adds internal spacing between items in the grid.
Padding top and bottom	range	Sets the amount of space above or below the grid section.