Understand and Using the Dynamic Grid

The dynamic grid is your foundation for creating professional, balanced page layouts. It works by dividing your page into columns that help organize your content beautifully across all devices. Below are some examples from our theme demo stores for your inspiration.

How the Grid Works

Your page is divided into columns that act like an invisible structure. On desktop screens, you have 16 columns to work with, while mobile screens use 8 columns. When you're in the theme editor, you'll see helpful guidelines showing these columns – don't worry, your customers won't see them.

Creating Layouts

When you add content blocks like images, text, or products, you'll choose how many columns each should occupy. Featured text might span 10 columns to make it prominent, while supporting images might use 2-3 columns in various places.

Desktop grid

The desktop uses an 16-column grid. Rows adjust automatically to fit your content.

Mobile grid

The mobile grid uses an 8-column grid. Rows adjust automatically to fit your content. Switch to mobile preview to configure the section more easily.

Below, you will find Mobile Grid Examples for comparison.

Making Professional Layouts

The grid offers valuable features to help you create polished designs, some things to keep in mind:

• Column widths help create visual hierarchy. Important elements can span more columns to draw attention, while supporting content takes up fewer columns.
• The "Allow transparent header" option, available when the grid is your first section, lets your header blend seamlessly with your content for a more immersive design.
• Remember to preview your layouts on both desktop and mobile views to ensure they look great for all your customers.
• The order of elements matters: elements added at the top of the section appear "on top". We recommend you place text and images above videos. If you place a video as the first Grid Item, it would cover up the text below.

Mobile Grid Examples: