# Customize checkout with the checkout and accounts editor

Level: Intermediate. About 45 minutes. Plans: Basic and higher; apps on the information, shipping and payment steps need Shopify Plus. Checked against Shopify's documentation on 2026-10-08.

**Short answer:** From your Shopify admin, go to **Settings** > **Checkout**, duplicate your active configuration, and click **Edit** on the draft to open the checkout and accounts editor [1][2]. Change the logo, colors and fonts in the **Settings** sidebar and add app blocks from the **Sections** or **Apps** sidebar [3][4]. Preview the draft, then click **Publish** [2]. Branding and apps on the Thank you and Order status pages work on Basic and higher; apps on the information, shipping and payment pages need Shopify Plus [5].

## 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 [1]. 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 [6].

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 [3].
- Since February 5, 2026, you can't add background images to the checkout header or main content area. You can only remove existing ones [3].
- 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 [7]. 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 [2].

## Steps

1. **Open your checkout settings.** From your Shopify admin, go to **Settings** > **Checkout** [1].
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** [2].
3. **Open the draft in the editor.** Click **Edit** next to the draft configuration. The checkout and accounts editor opens [1].
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 [1].
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** [3].
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** [3].
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** [3].
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** [4].
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 [1].
11. **Preview the draft.** Back in **Settings** > **Checkout**, in the **Drafts** section, click the **Menu** icon next to the draft and click **Preview** [2].
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 [2].

## Check your work

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

## 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 [3].
- **"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 [3].
- **"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** [2].
- **"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 [4].
- **"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 [4].

## Further reading

- Using the checkout and accounts editor [1]
- Customizing the style of your checkout [3]
- Apps in checkout, for developers [6]

## Sources

1. [Using the checkout and accounts editor](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-editor), Shopify Help Center, accessed 2026-10-08
2. [Managing your active and draft checkout configurations](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/active-and-draft-checkouts), Shopify Help Center, accessed 2026-10-08
3. [Customizing the style of your checkout](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-style), Shopify Help Center, accessed 2026-10-08
4. [Customizing your checkout and customer accounts with apps](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-apps), Shopify Help Center, accessed 2026-10-08
5. [Customizing checkout and accounts pages](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations), Shopify Help Center, accessed 2026-10-08
6. [Apps in checkout](https://shopify.dev/docs/apps/build/checkout), Shopify.dev, accessed 2026-10-08
7. [Non-Plus - Upgrading and replacing your Thank you and Order status pages](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-upgrade), Shopify Help Center, accessed 2026-10-08

Source page: https://webmerchants.net/guides/customize-checkout