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.
![](https://palo-alto.presidiocreative.com/~gitbook/image?url=https%3A%2F%2F230575901-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FD8OBdMJfHhQ1WkGSpHgX%252Fuploads%252FNmZETvD4QY6XegENfb9D%252Fgrid.gif%3Falt%3Dmedia%26token%3D1163b782-2214-44fc-899a-537ff5fb1a1e&width=768&dpr=4&quality=100&sign=a5a2cc3c&sv=1)
Key components
Layout and design: Use the individual block settings to change the layout of the entire section.
Display essentials: For the best look ensure that the combined width of all blocks on each row is equal to 100% (or as close as you can get). For example, you can use 2 blocks with 25% width and 1 block with 50% width to fill out a row.
Text and call to action: Define your block headings and customize the main buttons to invite users further into your store pages.
Using one 33% and one 66% wide block will fill out a row perfectly.
Configuring your section: Settings overview
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.
Block types: Explore four types of blocks, each with unique settings:
Collection: Showcase and link to collection pages.
Product: Directly link to product pages, including product price display.
Image: Use for visuals or to link to store pages.
Text: For speedy links to store pages.
Block width: Customize individual block widths to control screen space, enabling distinctive grid layouts.
Last updated