Designing your checkout page

Checkout is the last page a customer sees before they pay. On the Enterprise plan you can design it in the page builder, the same way you design any other template. Orbit gives you ten checkout elements, and a new checkout template starts with all ten in place.

Considerations

• Checkout customisation is part of the Enterprise plan. On other plans the Checkout tab is not shown and you cannot create a checkout template.
• Six of the ten elements are required. You can save a template without them, but you cannot publish it.
• The checkout flow and the checkout colours are settings, not elements. See Customising your checkout.
• In the 3-step flow, each element shows on the step you pick. In the single page flow, every element shows.

Open the checkout template

1. From your Orbit dashboard, go to Storefront, then Templates.
2. Click the Checkout tab to show only that template.
3. Hover over the template row and click Edit design. The template opens in the page builder.

If there is no checkout template yet, make one:

1. Click Create template.
2. Enter a Name, for example Checkout.
3. Choose Checkout as the Type, then click Create Template.

A new template comes with the standard layout. The wide column holds the progress bar, contact details, shipping address, shipping method, billing address, payment method and the place order button. The narrow column beside it holds the order summary, discount code and gift card.

The checkout elements

1. In the toolbox on the far left, click Elements.
2. Click the Checkout group.
3. Drag an element onto the canvas, then style it in the settings panel on the right.

There are ten:

• Checkout Progress: a step indicator that shows how far through checkout your customer is.
• Contact Details: collects the customer's email address. Required.
• Shipping Address: the form for the delivery address. Required.
• Shipping Method: the delivery options the customer picks from. Required.
• Billing Address: the form for the billing address, with a same as shipping toggle.
• Payment Method: the payment options the customer picks from. Required.
• Order Summary: the items, totals and tax for the order. Required.
• Discount Code: a box for a discount or promo code.
• Gift Card: a box for redeeming a gift card.
• Place Order Button: submits the order and finishes checkout. Required.

Tip: The Place Order Button has a Button Text setting. Orbit adds the live order total to whatever you type.

Contact Details is required, but it hides itself on most checkouts. It shows only when the cart has no shipping step to collect the email on, such as a digital or subscription cart, and only when the shopper is not signed in. Empty space where you put it is normal.

Choose which step an element shows on

1. Click the element on the canvas.
2. In the settings panel on the right, open Content.
3. Set Show On Step to All Steps, Shipping or Payment.

This setting only changes what customers see in the 3-step flow. In the single page flow every element is on the one page, whichever step you pick.

Publish your changes

1. Click Save in the toolbar.
2. Click Publish, then Save & Publish. The template goes live on your storefront.

If a required element is missing, the dialog shows a red box that starts Can't publish and lists what is missing by name. Nothing is published. Add the elements back from the Checkout group in the toolbox, then publish again.

Warning: A checkout with no Place Order Button cannot take money, so Orbit blocks the publish. Saving still works, so a half-finished draft is safe to leave.

For the full detail on saving and publishing, see Saving, previewing and publishing a page.

Related guides

• Customising your checkout
• Customising checkout and adding tracking
• Designing your order confirmation page
• Managing page templates