The builder · Siteryn Checkout Docs

Full screen editor on the Checkout page
Top bar: page switcher, status line, Reset/Preview/Save Draft/Publish
Elements, canvas with an element selected, Settings with breadcrumbs

The layout of the editor

Area	What's there
Top bar	The page switcher (Cart · Checkout · Thank You), the status line, and Reset to starter, Unpublish (only once the page has a published design), Preview, Save Draft and Publish. Switching pages with unsaved changes asks first ("Discard unsaved changes?").
Elements (left)	Every element for this page, grouped as WooCommerce, Layout, Content and Conversion, with a Search elements box. "Click to add to the selected column, or drag onto the canvas."
Canvas (centre)	Your page, live, with your theme's styles and sample data. Below it: a short help line with the shortcuts, and Add section.
Settings (right)	The selected item's settings with breadcrumbs (Page › Section › Row › Column › Element), or Page settings.

The editor opens full screen; toggle it with the full-screen button at the end of the canvas toolbar ("Full screen editor" / "Exit full screen"). Your choice, the last page you edited and the Canvas/Structure view are remembered in your browser.

Canvas toolbar

Page settings and Layouts buttons, and the current mode (One page or Multi-step).
Step tabs on a multi-step checkout (Canvas view): "All steps", "1. Information", "2. Shipping & Payment". Choosing a step shows only it, and new elements go to that step.
Undo / Redo (up to 60 steps). An "Updating..." indicator shows while the canvas refreshes.
Desktop / Tablet / Mobile (Canvas view): the canvas renders at 1280, 820 or 390 px wide and is scaled to fit, with a zoom indicator.
Canvas / Structure: the live page, or a box view of sections, rows and columns that's handy for big moves.
Full screen editor / Exit full screen.

Selecting and moving

Click any element, column, row or section on the canvas to select it. Click empty space for Page settings.
The selection toolbar has Drag to move, Select parent, Move up, Move down, Duplicate and Remove.
Moving an element past the edge of its column continues into the next column, so keyboard users can reach every column.
Elements hidden on the current device are dimmed and dashed, with a "Hidden on: …" badge.

Adding elements

A clicked element is inserted after the selected element, or at the end of the selected column. With a row or section selected, it goes to the end of its first column; with nothing selected, to the end of the first column on the page. While a step tab is open, it goes to that step. Single-use elements already on the page show In use and can't be added again. Elements that replace one already placed show Swap (add the new one, then remove the old).

Sections, rows and columns

Add section (under the canvas, in both views) with a column preset: 1 column, 2 columns, 2/3 + 1/3 or 1/3 + 2/3.
Add row on a section, and Add column on a row (up to 2 in Free, 4 in Pro). Both are in the Structure view.
An empty column shows "Drop elements here" on the canvas; on your store it collapses.
Duplicate copies a container with its content. Single-use elements are skipped ("Single-use elements were not copied.").
Remove asks first when a container has content. Required elements can be moved but not removed.

Keyboard shortcuts

Shortcut	Action
`Ctrl/⌘` + `S`	Save draft (works while typing too)
`Ctrl/⌘` + `Z`	Undo
`Ctrl/⌘` + `Shift` + `Z` or `Ctrl/⌘` + `Y`	Redo
`Ctrl/⌘` + `D`	Duplicate the selected item
`Delete` / `Backspace`	Remove the selected item
`Esc`	Back to Page settings; exit full screen; close a dialog
`Ctrl/⌘` + `C` / `V` Pro	Copy and paste, also between pages

Element shortcuts work when the canvas has focus, not while you're typing in a field.

Settings tabs

Settings are grouped into Content, Layout, Style, Typography, Responsive, Visibility and Advanced; only tabs with settings appear. Colour pickers have Default and Clear. See Styling for the shared controls.

Saving, preview and publishing

Button	What it does
Save Draft	Saves without changing your store. "Draft saved. Publish to show it on your store."
Preview	Opens the draft in a dialog at Desktop, Tablet or Mobile width with sample products. Nothing is added to a cart and no order is created. Your theme's own styles are not loaded in this dialog; the canvas shows them.
Publish	Makes the design live, without a confirmation. "Published. Your store now uses this design."
Unpublish	After you confirm ("Unpublish this design?"), returns to the default design and keeps yours as a draft.
Reset to starter	After you confirm ("Reset to the starter design?" → Reset Draft), replaces the draft with the "Free Layout 1" starter. "Draft reset to the starter layout. Publish to apply it to your store."

When something is wrong

A design with problems isn't saved: "The design was not saved. Fix the highlighted problems and try again." Under Please fix these problems:, each error has a Show link that selects the item. Common ones:

Message	Fix
This page needs one of these elements: Billing Address / Customer Details (classic).	Add one of them.
The "Cart Items" block is required on this page.	Add it back, or unhide it.
The "…" block is required, so it must show on every device. It is hidden on: mobile.	Turn off "Hide on mobile" on the element or its section, row or column.
"Contact Information" and "Customer Details (classic)" show the same checkout fields…	Remove one of them.
The "…" block can only be used once.	Remove the duplicate.
The "…" block is not available. Remove it, or reactivate the plugin that provides it.	Reactivate the plugin that provides it, or remove the element.
You can use up to … sections. · A section can hold up to … rows. · A row can hold up to … columns.	Remove the extra items (Free limits; see Limits).
Every step needs a title.	Name the step in the Steps panel.

Your work is safe

If your login session expires, your unsaved changes are kept in the editor and restored next time: "Unsaved changes from your previous session were restored."
If someone else changed the design meanwhile, you're asked to Reload latest version before saving.
Leaving the page with unsaved changes asks you first.