Checkout steps
Your store's checkout has three steps: Delivery options, Order payment and Order confirmation. Each one is customized in the editor, with the same tools as your pages and a sample cart drawn from your catalog. Until a step is published, your customers see the original checkout for that step.
What do you want to do?
- Open a checkout step
- Change the layout of a step
- Add a reassuring message
- Customize the thank-you message
- Set up the payment methods
- Publish a step
- More situations: Payments, taxes and invoices: common cases
Open a checkout step
Open Themes, Checkout tab (shown when your site has a store), then click Delivery options, Order payment or Order confirmation. In the editor bar, the menu named after the open step (Checkout list) switches from one step to another; Desktop and Mobile toggle the view. The first time you open it, each step copies the structure of the original checkout.
Change the layout of a step
- Click the page background: the step's panel opens (Checkout: shipping, Checkout: payment or Checkout: confirmation).
- In Templates, click Change, then pick a layout: Two columns, Summary panel, Form first, Single column or Framed for shipping and payment; Centered, Items panel, Split or Card for the confirmation.
- Confirm with Replace.
The template replaces every section of the step but keeps the texts you typed on the elements; you can undo this change. Reset layout goes back to the original layout.
Add a reassuring message
On the Delivery options or Order payment step, add a regular block (text, image, button...), for example under the order summary, write your message (e.g. "Free returns within 30 days") and publish the step.
On the payment step, the Payment form element also has a Text under the pay button, set in its panel.
Customize the thank-you message
On the Order confirmation step, the eyebrow, heading and message of the thank-you are regular text blocks, written in your dashboard's language: edit them like any text, they are translated for your visitors like the rest of your site.
Select Order number or Continue shopping to edit their texts in the Texts section of their panel: the order number label, the link text. You can also click the selected element again and type right on the page.
These two texts are store settings: they apply right away, without waiting for publishing, and are not undone with the page edits. Left empty, they keep the default text, translated into the visitor's language.
Set up the payment methods
Select the Payment form: its Payment section sets the Layout of the payment methods (Tabs or Accordion), opens Manage payment methods to choose the ones offered, and holds the Text under the pay button. Turned-on payment methods apply to your store at once, not when the step is published.
Publish a step
Click Publish layout, review the desktop and mobile preview, then confirm. The step's main element must be on both views: Shipping methods, Payment form or Order number.
Once a step has its own header, it must also keep a way back to the store: the Logo (or Continue shopping on the confirmation). If the layout already live loses one of these elements, the editor warns you that it can leave your customers stuck: add the missing element, marked To add in Elements, then publish again.
The elements of each step
The Elements button offers those of the open step (they show the cart or the paid order):
- Delivery options: Order summary (items, promo code, subtotal, shipping, total), Shipping methods (delivery choice, pickup point, time slot or required detail, then the button to payment).
- Order payment: Order summary, Payment form (contact details, addresses and payment, with the pay button).
- Order confirmation: Order number, Delivery tracking (hidden for an order without delivery), Ordered items, Continue shopping.
Each step starts with the editable checkout header: Logo, Checkout steps (the current step highlighted) and Customer account (with memberships). If a published step has none of them, your customers see the original header.
Good to know
Shipping methods, prices and required details are set in Shipping, payment methods in Payment. The sign-in page and the customer area are customized in Sign-in and customer area.