The checkout editor

The screen

Checkout in the dashboard, then Open the editor. The editor fills the screen, in the model of Shopify's checkout editor. From left to right:

• A narrow rail with two icons, Sections and Settings, and at the bottom a button that hides or shows the panel next to it. Click the active icon again to hide the panel too. The editor remembers the tab and whether the panel is open on this browser.
• The panel: the page's parts (Sections) or the store-wide settings (Settings).
• The live preview: your real checkout on a sample order; nothing here can be paid.
• The inspector on the right, only while something is selected. Without a selection the preview gets the room.

The top bar has ← (back to the dashboard) and your store name; in the middle one page menu (Checkout and Thank-you page); on the right Desktop and Mobile, Undo and Redo, a dot with "Unsaved" while you have changes, a ⋯ menu (Discard changes, Open in a new tab, Reset to defaults) and Save.

Selecting a part

Click a part in the preview (a section, a block, the order bump) or its row in the tree: the row lights up, the preview outlines the part and scrolls to it, and the inspector opens with its name, a short line about it and its settings. ✕ at the top of the inspector, or Esc, closes it again. In the preview, clicks only select: the fields, buttons and links do nothing there.

• Header: logo, cart link, announcement bar, header colour and image.
• Express checkout: the Apple Pay / Google Pay buttons and where they show.
• Contact, Delivery, Shipping method, Payment: the section's note, the phone rule, the payment methods.
• Pay button: its label and the button colours.
• Order summary: the discount field, product images, editable quantities, the "Total" label, its colour and image.
• Order bump: your offers, their numbers and the bump's position (see Order bump).
• Footer: its note; the policy links come from Shopify.
• A block: its form, with Remove and the eye (show or hide) at the bottom. What the block does sits under About this block; longer explanations of a field sit behind the ⓘ next to its name (see Blocks).

Sections: adding and moving blocks

The Sections tab lists the page in order. Hover a section (or tab to it) and a + appears at the end of its row: it adds a block right after that section, and its menu lists only the block types that fit there. On Order summary the menu has two groups, the top and the bottom of the summary. Blocks show as rows under their section with their name (a custom HTML block with the name you gave it); hover a row for the block's summary. A dot on a row means something needs a look (incomplete, hidden, or not shown on the thank-you page); hover it to read what.

A block row has its own + (a block under this one), an eye and a ⋮ menu: Move up, Move down, Move to…, Duplicate, Remove. You can also drag a block by its handle onto another block or onto a section. While you drag, a thin line appears under every section where the block may go, empty ones included; a place that does not take that type shows a "not allowed" cursor and refuses the drop. Contact, Delivery and Shipping method drag among themselves the same way (Shipping method stays below Delivery). Nothing changes until you drop; Esc cancels. Everything a drag does, the ⋮ menu does too, for the keyboard.

Settings: the store-wide look

The Settings tab holds what applies to the whole checkout: Design (logo, colours, fonts, corners, background images), Pages (one page or two steps), Language, Fields and the thank-you page. Each group is closed with a one-line summary of what it is set to (for example "One page" or "Phone optional"); click it to open it. The editor remembers which groups you opened. Selecting a part does not switch away from this tab. "Reset to defaults" is in the ⋯ menu of the top bar.

Undo, redo, save

Every change is one step: Undo and Redo in the top bar, or Ctrl / Cmd+Z and Shift+Ctrl / Cmd+Z (Ctrl / Cmd+Y works too) anywhere on the page outside a text field. Typing in a field counts as one step per field. The last 50 steps are kept. Changes show in the preview at once and reach buyers only when you press Save; Discard changes in the ⋯ menu drops everything since the last save (Undo still brings it back). Leaving with unsaved changes asks first.

The checkout and the thank-you page

The page menu in the top bar switches the preview and the tree between Checkout and the Thank-you page. On the thank-you page the tree shows "Title and status" (with the after-payment choice), "Details", "Continue shopping" and the order summary, each with a + for blocks. While buyers are sent to Shopify's order status page, a note at the top of the tree says the blocks there are hidden. With the two-step layout the menu lists Checkout – Information and Checkout – Payment; selecting a part on the other page switches to it.

Limits

• Below 1024px wide the editor shows the top bar and the preview only, with a note; Save and the ⋯ menu still work.
• Blocks are dragged in the tree, not in the preview.
• The settings are the same as before: nothing new can be set, and nothing is stored until Save.