Using the checkout editor

The checkout editor is a tool that lets you customize and edit the functionality and the appearance of your checkout in a single place that's separate from your theme editor.

Before you start customizing your checkout, learn how to access and navigate the checkout editor.

Checkout editor sections

You can access the checkout editor in Settings > Checkout > Checkout customization section from your Shopify admin.

The checkout editor has two main sections—Settings and Sections:

  • In the Settings section, you can customize the appearance of your checkout.
  • In the Sections section, you can customize the functionality of your checkout.

Accessing the Settings section

To access the Settings section of the checkout editor, click the gear icon on the left sidebar:

Settings section in the checkout editor

Accessing the Sections section

To access the Sections section of the checkout editor, click the section icon at the left sidebar:

Sections section in the checkout editor

Previewing Shop Pay

If you have Shop Pay activated in your Shopify admin, then you can preview how the Shop Pay accelerated checkout is displayed to your customers. To preview Shop Pay, click the checkout icon at the top right corner of the checkout editor.

Preview Shop Pay in the checkout editor

Undoing and redoing actions

To undo or redo any changes you made in the checkout editor, click the undo or redo icon at the top right corner of the checkout editor.

Undo and redo buttons in the checkout editor

Previewing your checkout and new customer account pages

To preview how your checkout and customer account pages display on different screen types, such as on a desktop, full screen, or mobile, click the desktop icon to switch between different views. This preview includes the orders page, order status page, and the account information page.

Preview your checkout on different screen types

Using additional actions

Click the icon to open a drop-down menu that lets you do the following actions:

  • preview how your checkout is displayed to your customers
  • access the theme editor
  • view help documentation
  • rename your checkout customization
  • get support
Preview your checkout, access the theme editor, view documentation, rename your checkout, and get support

Using keyboard shortcuts in the checkout editor

You can use the following keyboard shortcuts to navigate the checkout editor faster:

Keyboard shortcuts
ActionShortcut on WindowsShortcut on macOS
UndoHold the Ctrl key, and then press the Z key.Hold the command key, and then press the Z key.
RedoHold the Ctrl key, and then press the Y key.Hold the command key, and then press the Y key.
SaveHold the Ctrl key, and then press the S key.Hold the command key, and then press the S key.
Ready to start selling with Shopify?Try it free