---
title: "Checkout steps: delivery, payment and confirmation in the editor"
description: "Customize the delivery options, the order payment and the order confirmation in the editor."
url: https://docs.vivlab.com/en/sections/themes-checkout
---

# 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.

<DocsAccess />

## What do you want to do?

- [Open a checkout step](#open-a-checkout-step)
- [Change the layout of a step](#change-the-layout-of-a-step)
- [Add a reassuring message](#add-a-reassuring-message)
- [Customize the thank-you message](#customize-the-thank-you-message)
- [Set up the payment methods](#set-up-the-payment-methods)
- [Publish a step](#publish)
- More situations: [Payments, taxes and invoices: common cases](https://docs.vivlab.com/en/guides/payments.md)

## Open a checkout step

Open [Themes](https://docs.vivlab.com/en/sections/branding.md), **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

<DocsSteps>

1. Click the page background: the step's panel opens (**Checkout: shipping**, **Checkout: payment** or **Checkout: confirmation**).
2. 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.
3. Confirm with **Replace**.

</DocsSteps>

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 {#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 {#publish}

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 {#elements}

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](https://docs.vivlab.com/en/sections/shippings.md), payment methods in [Payment](https://docs.vivlab.com/en/sections/payments-settings.md). The sign-in page and the customer area are customized in [Sign-in and customer area](https://docs.vivlab.com/en/sections/themes-accounts.md).