Sections, rows & columns
Every design is made of sections, which hold rows, which hold columns, which hold elements. Here's what each level can do, plus the simple content elements available on every page.
Section
A full-width band of the page.
Contained (up to the page width, 1200 px), Narrow (720 px, for focused pages) or Full width.
Transparent and inherited by default.
On a multi-step checkout (Content tab): which step the whole section belongs to, or "Same as section / all steps".
Row
Stretch, Top, Middle or Bottom.
Or "Mobile only": when columns are placed under each other instead of side by side.
Column
Columns in a row share the row width in proportion to this value: 60 and 40 make a 60/40 split, 2 and 1 make two-thirds and one-third.
Padding 0–120 px (default 0), background transparent by default. Use both for a tinted summary card.
Keeps the column in view while the shopper scrolls, on screens wider than 1024 px. Perfect for an order summary.
For example, show the order summary above the form on phones.
An empty column collapses on your store. In the editor it shows "Drop elements here". Add rows and columns from the Structure view (Add row, Add column), and sections from Add section under the canvas. See The builder.
Visibility & classes
Every section, row, column and element has Hide on desktop, Hide on tablet and Hide on mobile (tablet up to 1024 px, mobile up to 767 px), and up to five Additional CSS class(es) for your theme's CSS. Required elements must stay visible on every device, including through their parent containers.
Limits
| Per page | Free | Pro |
|---|---|---|
| Sections | 12 | 40 |
| Rows per section | 4 | 12 |
| Columns per row | 2 | 4 |
| Elements per column | 20 | 60 |
| Checkout steps | 2 | 10 |
Content elements
These general-purpose elements work on every page and can be used as often as you like:
| Element | Settings |
|---|---|
| Heading | Text (default "Heading"), Level H1–H6 (H2), Alignment, Color, Font size (0–72 px). |
| Text | A paragraph with links, bold, italic, paragraphs and lists. Alignment. |
| Button | Label ("Learn more"), Link URL, Open in a new tab, Style (Filled or Outline), Alignment. Without a URL it shows only in the editor. |
| Image | Image URL, Alternative text (describe it for screen readers), optional Link URL, Maximum width (%), Alignment. Great for payment or trust logos. |
| Divider | Line style (Solid, Dashed, Dotted), Color, Thickness (1–10 px). |
| Spacer | Height (4–200 px, default 32). |