Structure elements are the foundation of every layout. In the builder, open Insert, switch to the elements view, and open the Structure group. It contains three elements: Grid, Column, and Row. Together they control how content is arranged and how nested elements align inside a section.
Grid
The Grid element gives you a canvas of cells for precise layouts. It offers two presets:
Grid — a fixed-column grid where you place elements into cells. Good for hero sections, product grids, and any layout that needs cell-level control.
Bento — a pre-built asymmetric grid pattern, useful for editorial-style blocks and feature highlights.
After inserting a grid, select it and use the Style tab of the Design panel to adjust its columns, rows, and gap. Drag child elements into cells or resize them on the canvas. Grid children get a Location control plus column and row span settings.
Column
The Column element arranges content in equal-width, side-by-side lanes. It offers 1 column, 2 columns, 3 columns, and 4 columns presets. Each column is a container you fill with text, images, buttons, or product elements, and each stacks its own content vertically.
Use columns for content that stays aligned side by side — for example, a product image in one column and the title, price, and add-to-cart button in another. Check the responsive settings in the Design panel per breakpoint to control how columns behave on smaller screens.
Row
The Row element arranges content as horizontal strips. It offers 1 row and 2 rows presets. Rows are useful inside columns or grids when you need a horizontal band — a logo bar, icon row, or button group — without building a full grid.
Work with structure in the builder
Open Layouts & layers to see how grids, columns, and rows nest inside your section, and rename layers for clarity when a layout gets complex. You can also select siblings and choose Wrap in container from the right-click menu to group them into a new container.
Structure containers support Repeat on when you connect Shopify content — for example, a column inside a product catalog repeats once per product. Use Conditional visibility on child elements to show or hide content based on rules like product availability or cart count, without duplicating entire layout blocks.
Tips
Start with the simplest structure that fits your design. A two-column layout often covers a product page; reach for a grid when you need bento-style asymmetry. Keep nesting shallow where possible — deep trees are harder to manage in Layouts & layers.