Layouts & modes
Start every page from a ready-made layout (one page, multi-step or a blank canvas) and switch modes in one click. Everything stays fully editable.
Choosing a layout
Click Layouts in the canvas toolbar, or Choose a layout in Page settings. The Choose a layout dialog can be filtered by All, One page, Multi-step or Custom (only the groups the page has). Click a layout card to apply it; multi-step layouts carry a "2 steps" badge.
- It replaces the sections, mode and steps of the draft. Your colours and page settings are kept.
- On a page with content you're asked first ("Replace the current layout?"); confirm with Use this layout. You can undo with Ctrl/⌘ + Z.
- Your store doesn't change until you publish.
Checkout layouts
| Layout | Description |
|---|---|
| One page · Two columns | Customer details and payment on the left, a sticky order summary on the right. A top section holds Checkout Notices and Returning Customer Login. The form column (60%) holds Contact Information, Billing Address, Shipping Address, Shipping Methods, Payment Methods, Terms & Privacy and Place Order Button. The summary (40%, tinted, sticky, shown first on phones) holds Order Items, Coupon and Totals. |
| Multi-step · Two columns | The same structure split in two, with a Steps Progress section on top. Step 1 "Information": Contact Information, Billing Address and Shipping Address. Step 2 "Shipping & Payment": Shipping Methods, Payment Methods, Terms & Privacy and Place Order Button. The order summary stays visible on both. |
| Custom · Blank canvas | Only what a checkout needs to work: Checkout Notices, Billing Address, Payment Methods and Place Order Button. |
Cart layouts
| Layout | Description |
|---|---|
| Two columns | Cart Notices, Cart Heading and Empty Cart on top. Below, Cart Items and Continue Shopping on the left (65%), and a sticky column with Cart Totals and Proceed to Checkout on the right (35%). |
| Single column | Items, coupon and totals stacked in one focused, narrow (720 px) column: Cart Notices, Cart Heading, Empty Cart, Cart Items, Cart Totals, Proceed to Checkout and Continue Shopping. |
| Custom · Blank canvas | Only what a cart needs: Empty Cart, Cart Items, Cart Totals and Proceed to Checkout. |
Thank You layouts
| Layout | Description |
|---|---|
| Centered | A confirmation hero, then the order details in one narrow, centered column: Success Message, Order Overview, Payment Instructions, Continue Shopping, Order Items and Billing & Shipping Addresses. |
| Two columns | A full-width hero (Success Message and Payment Instructions), then Order Items and Addresses (60%) beside a sticky summary with Order Overview, Payment Method and Continue Shopping (40%). |
| Custom · Blank canvas | Just the confirmation (Success Message) and Payment Instructions. |
- Layout dialog on the Thank You page
Layout modes
One page
Everything on a single page. Available on Cart, Checkout and Thank You (the only mode on Cart and Thank You).
Multi-step
Split the checkout into steps with a progress indicator. Checkout only; 2 steps in Free, up to 10 with Pro.
Switch modes in Page settings → Layout mode. Switching to Multi-step splits the checkout automatically: customer details in step 1, shipping and payment in the last step, the summary on every step, plus a Steps Progress bar. See Multi-step checkout.
The starter design
Reset to starter loads "Free Layout 1" for the page into your draft. On Checkout it is a one-page, two-column design (60/40) with a sticky, tinted summary, the same structure as "One page · Two columns". On Cart and Thank You it is the default design built from the default settings (on Cart: items and Continue Shopping beside a sticky totals column, plus Empty Cart). Your store isn't changed until you publish.