Grid

This section is available in v3.0 and later. Learn how to update your theme to access new features.

The Grid section displays a flexible collage of feature images. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

Set up section

---

In the editor side panel, click (+) Add section and select Grid. Click and hold the drag handles ⋮⋮ to re-order sections.

Click the section to add a section header and change section styles for colors and spacing.

Section header

Section colors

Width and Padding

Set up grid items

---

Add Grid item blocks with background images or autoplay videos. Create different layouts by reordering the blocks with the drag-and-drop handles ⋮⋮ and customize the width and height of each block.

• Add background images or autoplay videos.

• Add headings and buttons with selected positions

• Change the width and height of each item

Add background media

---

Add an image or autoplay video (without sound) as the grid item's background.

Using color overlays

Learn how to change overlay colors and use gradients.

Video requirements

For autoplay videos, make sure your video files meet the following requirements:

Video file type	.mp4 or .mov Embedded YouTube or Vimeo videos are not supported.
Video length	< 15 seconds (Recommended)
Video size	< 10MB (Recommended)

Click Grid item block to find settings

Setting	Description
Image	Select or upload an image.
Mobile image	Select or upload an alternate image to display on mobile screens.
Video	Add a short autoplay video (without sound) to replace the image.
Mobile video	Upload an alternate video to display on mobile screens.

Change width and height

---

Adjust the width and height of each block to create unique layouts.

Click Grid item block to find settings

Setting	Description
Width	Choose the width of the grid item as a percentage of the section width. Select 33%, 50%, 66%, or 100%.
Height	For desktop and mobile, change the height of the grid item between 300 to 800 pixel.

Add content

---

Add headings, text, and optional button to overlay the grid media.

Click Grid item block to find settings

Setting	Description
Content position	For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.
Text alignment	For both desktop and mobile
Content width	Choose to display the content full width or a custom width. Select Custom width to set the maximum content width between 100 to 900 pixels.
Overline	Add text to show a small heading above the main heading.
Heading	Add text to show a main heading.
Heading size	Change the font size of the heading from small (1) to large (8).
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.
Text	Add text to show a subheading below the main heading.
Text size	Change the font size of the text from small (1) to large (8).
Button link	Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.
Button label	Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Join us, Shop now).
Button style	Change the style of the button. Select Solid, Outline, or Text.
Button size	Change the size of the button to Small or Regular.

Scrolling text

---

Display scrolling text around the edges of grid items.

1. In the grid item block settings, add the text you want to show.

2. Then, in the section settings, change the style of scrolling text:

• Use the Scroll duration slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.

• Choose to scroll content towards the Left or Right.

• Show an icon and change the text divider

Click section for settings

Setting	Description	Options
Enable scrolling text	Toggle on to rotate scrolling text added to grid blocks.
Scroll duration	Change the number of seconds it takes for the content to scroll from beginning to end.	5 - 45 secs
Scroll direction	Choose the direction of scrolling.	Left Default Right
Text divider	Display an icon or dot between scrolling text blocks.	Icon Dot None
Icon	For the icon text divider, select from 30+ free icons.

Grid spacing

---

Adjust the grid spacing between grid blocks on desktop and mobile screens.

Click section to find settings

Setting	Description
Desktop spacing	For desktop screens, adjust spacing between the grid blocks: between 0 and 60 pixels.
Mobile spacing	For mobile screens, adjust spacing between the grid blocks: between 0 and 50 pixels6