Customize checkout with the checkout and accounts editor

Before you start

Shopify's checkout is customized in the checkout and accounts editor. It is separate from the theme editor and covers checkout, the Thank you page, the Order status page and customer account pages¹. Shopify groups this under checkout extensibility: apps add features through UI extensions, Shopify Functions, web pixel extensions and payments extensions instead of edits to checkout code⁶.

What your plan allows^5,4:

• Basic and higher: access to the editor, branding on all pages, and eligible apps on the Thank you, Order status and customer account pages.
• Shopify Plus only: apps on the information, shipping and payment pages, custom apps built with Shopify Functions, and the Checkout Branding API.

Other limits to know:

• The Configurations area in Settings > Checkout stays hidden until you choose a plan and create your first product³.
• Since February 5, 2026, you can't add background images to the checkout header or main content area. You can only remove existing ones³.
• Non-Plus stores had to upgrade their Thank you and Order status pages by August 26, 2026, and the additional scripts box in checkout settings has been view-only since August 28, 2025⁷. If you still see an upgrade notice, finish that first.

Work on a draft copy so your live checkout doesn't change until you publish. Basic, Grow and Advanced stores can keep up to 20 drafts; Shopify Plus stores up to 99².

Steps

1. Open your checkout settings. From your Shopify admin, go to Settings > Checkout¹.
2. Make a draft copy. In the Configurations section, click the Menu icon (three dots) next to your active configuration, then click Duplicate. The copy appears in the Drafts section marked Just added².
3. Open the draft in the editor. Click Edit next to the draft configuration. The checkout and accounts editor opens¹.
4. Choose the page to work on. Click the page selector in the top bar. Pick Checkout (one-page checkout) or Information, Shipping and Payment (three-page checkout), or Thank you, Order status and the other customer account pages¹.
5. Add your logo. Click the Settings icon (gear). In the Logo section, click the Image field, click Select from library and choose your logo. Optionally set Width in pixels and Alignment, then click Save³.
6. Set your colors. In the Settings sidebar, add your brand colors under Color palette with +. Then set colors in the Header, Main, Accent and buttons, Order summary and Input fields sections. You can enter a hex code in each color field. Click Save³.
7. Change the fonts. In the Typography section of the Settings sidebar, choose a font from the Headings and Body drop-downs, then click Save³.
8. Add an app block. Click the Sections icon, click ⊕ Add block in the section where the app belongs, and click the block. Or click the Apps icon, click ⊕ next to a block, and pick a page in the Add to pop-out. Configure the block's settings and click Save⁴.
9. Arrange the page. With the Preview inspector on (it is on by default), reorder, hide or duplicate sections and blocks directly in the preview. You can also drag blocks in the Sections list^1,4.
10. Save your work. Click Save, or press CTRL + S on Windows or ⌘ + S on macOS. Undo and redo only cover unsaved changes¹.
11. Preview the draft. Back in Settings > Checkout, in the Drafts section, click the Menu icon next to the draft and click Preview².
12. Publish the draft. In the Drafts section, click Publish next to the draft, then click Publish again to confirm. Your previous active configuration becomes a draft².

Check your work

• In the editor, step through every page with the page selector, and click the mobile button to see the phone layout¹.
• Click the Shop Pay icon in the menu bar to preview the Shop Pay version of checkout pages¹.
• Remember that the editor uses a simulated checkout: you can't place orders there, and Pay Now and Buy Again are turned off¹.
• After publishing, check that your old configuration now sits in the Drafts section. Publishing it again is how you roll back².

Common problems

• "I can't find Configurations in checkout settings." The section is hidden until the store has a plan and at least one product³.
• "I can't add an app to the shipping or payment step." Apps on the information, shipping and payment pages need Shopify Plus. On Basic, Grow and Advanced, apps can only go on the Thank you, Order status and customer account pages^5,4.
• "There is no option to add a background image." Since February 5, 2026, new background images can't be added to the header or main content area. Existing ones can only be removed from the store default settings³.
• "Undo doesn't bring back my old version." Once you save, undo and redo no longer cover those changes. Publish an older draft instead, or start again from a new duplicate^1,2.
• "Preview shows a blank page in Safari." Turn off Prevent cross-site tracking and Block all cookies under Safari Settings > Privacy².
• "I removed an app block but the app is still installed." Removing a block only takes it off checkout. To remove the app itself, uninstall it from your apps settings⁴.
• "Checkout looks wrong when an order has shipped and pickup items." On Plus, customizations might not display correctly in the ship and pickup in one order test drive. Test that case before you publish⁴.

Further reading

• Using the checkout and accounts editor¹
• Customizing the style of your checkout³
• Apps in checkout, for developers⁶