---
title: "Customizing Shopify Checkout Branding"
description: "Find checkout fonts and colors in Shopify, and understand when to use strategy Appearance or advanced profile branding."
url: https://docs.orderediting.com/en/articles/15323706-customizing-shopify-checkout-branding
collection: "Strategies and Configuration"
updated: 2026-11-05
language: en
---

# Customizing Shopify Checkout Branding

Find checkout fonts and colors in Shopify, and understand when to use strategy Appearance or advanced profile branding.

# Before you begin

Use Shopify's checkout editor for checkout fonts and colors. The advanced **Checkout Branding** editor described later in this article is separate and requires Shopify Plus, an editable draft profile and the appropriate staff permissions.

An offer's layout, frames and images can belong to its strategy's **Appearance** settings. Email branding is separate again. Choose the setting for the part of the experience you want to change.

# Open Checkout Branding

To change checkout fonts or colors:

1.  Open **Settings > Checkout** in Shopify admin.
    
2.  In **Configurations**, select **Edit** for the configuration you want to change.
    
3.  Open **Settings** in the checkout editor.
    
4.  Adjust the relevant color or typography setting.
    
5.  Review the preview and save when ready.
    

Shopify's [checkout style guide](https://help.shopify.com/en/manual/checkout-settings/customize-checkout-configurations/checkout-style) explains the available controls.

If **Manage Checkout Branding** is available in your Order Editing setup, it opens the advanced profile editor covered below. Do not look for it under an unrelated branding section if it is absent. Use Shopify's editor for fonts and colors, or ask Support to confirm advanced-editor access.

The advanced editor selects the published main profile when available, but that profile is read-only. Choose a draft to change its supported branding values.

# Select an editable checkout profile

1.  Open the checkout profile picker.
    
2.  Review the profile name and publication state.
    
3.  Select a **Draft** profile.
    
4.  Wait for its current branding values and preview to load.
    

If you have unsaved changes, save or discard them before switching profiles. This protects the edits from being applied to the wrong profile.

Create or duplicate a checkout profile in Shopify if you do not have a suitable draft. Order Editing does not turn a published profile into an editable draft.

# Configure global colors

The global tokens provide semantic colors used by supported checkout components.

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Color</p></th><th colspan="1" rowspan="1"><p>Intended use</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Brand</strong></p></td><td colspan="1" rowspan="1"><p>Primary branded controls and prominent interface elements</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Accent</strong></p></td><td colspan="1" rowspan="1"><p>Secondary emphasis and interactive accents</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Success</strong></p></td><td colspan="1" rowspan="1"><p>Successful or completed states</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Warning</strong></p></td><td colspan="1" rowspan="1"><p>Information that needs caution or attention</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Critical</strong></p></td><td colspan="1" rowspan="1"><p>Errors or high-priority destructive states</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Info</strong></p></td><td colspan="1" rowspan="1"><p>Informational states and messages</p></td></tr></tbody></table>

1.  Open **Global colors**.
    
2.  Select a token.
    
3.  Enter or choose a valid color value.
    
4.  Review contrast and meaning in the preview.
    
5.  Repeat only for tokens that need to differ from the Shopify profile defaults.
    

Use warning and critical colors consistently. They should communicate status, not act as decorative brand colors.

# Configure checkout color schemes

Checkout profiles can use separate schemes for major page regions.

-   **Scheme 1** controls the main checkout area and can include base, button, and form styling.
    
-   **Scheme 2** controls the order summary area.
    

1.  Open **Scheme 1**.
    
2.  Review the base, button, form, and related supported colors.
    
3.  Update the required values and check the main checkout preview.
    
4.  Open **Scheme 2**.
    
5.  Update the order-summary colors.
    
6.  Check text, links, inputs, buttons, selected states, errors, and disabled states for usable contrast.
    

Avoid testing only the default state. A color that looks acceptable on an empty preview can fail when a field has an error or a button is disabled.

# Configure corner radius

Corner-radius tokens control how rounded supported components appear.

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Token</p></th><th colspan="1" rowspan="1"><p>What it affects</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong>Base</strong></p></td><td colspan="1" rowspan="1"><p>The default rounding used across supported components</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Small</strong></p></td><td colspan="1" rowspan="1"><p>Smaller controls and component details</p></td></tr><tr><td colspan="1" rowspan="1"><p><strong>Large</strong></p></td><td colspan="1" rowspan="1"><p>Larger containers or prominent components</p></td></tr></tbody></table>

1.  Open **Corner radius**.
    
2.  Enter a number for each token you want to change, such as `8` or `0`. Order Editing displays and saves the value in pixels.
    
3.  Use `0` for square corners.
    
4.  Review small controls and larger containers in the preview.
    

Keep the three values visually related. Very different values can make checkout feel inconsistent even when each individual value is valid.

# Review typography

The typography section shows the fonts and typographic settings associated with the checkout profile. These values are read-only in Order Editing.

To change typography:

1.  Save or discard any current Order Editing branding changes.
    
2.  Open Shopify's checkout editor for the draft profile.
    
3.  Update the typography there.
    
4.  Save the Shopify profile.
    
5.  Return to Order Editing and reload the checkout profile.
    

# Use the preview

Order Editing uses an available product to show a representative checkout preview. Preview content does not guarantee every checkout state or extension will look identical.

Check:

-   text and background contrast;
    
-   primary and secondary button states;
    
-   form fields, borders, focus, and validation messages;
    
-   success, warning, critical, and informational states;
    
-   the main checkout and order-summary schemes;
    
-   corner radius on small and large components;
    
-   Order Editing blocks installed in the Shopify checkout editor.
    

# Save and publish the Shopify profile

1.  Review all changed sections.
    
2.  Select **Save**.
    
3.  Wait for confirmation that the profile was saved.
    
4.  Open Shopify's checkout editor.
    
5.  Preview the complete draft profile at desktop and mobile sizes.
    
6.  Add a product to the cart and continue to checkout with the installed Order Editing extensions.
    
7.  Publish the checkout profile through Shopify only when the whole profile is approved.
    

Saving in Order Editing updates the selected draft profile. It does not by itself publish that Shopify checkout profile.

# Verify it's working

1.  Reopen the draft profile in Order Editing and confirm the saved values remain.
    
2.  Open the same draft in Shopify's checkout editor.
    
3.  Confirm the colors and radius values appear as expected.
    
4.  Preview checkout with a test product.
    
5.  Check Order Editing extensions, form errors, payment states, and the order summary.
    
6.  Publish the profile through your normal Shopify change process.
    
7.  Add a product to the cart and open the published checkout to confirm it uses the intended branding.
    

You do not need to place an order to verify checkout branding. Review the published checkout before payment and use Shopify's editor to inspect states that are difficult to reproduce in a normal checkout journey.

# FAQ

# Why are the controls read-only?

The selected profile is probably published, or your account lacks the required Shopify Plus or staff permission. Select a draft profile and check permissions.

# Why can I not switch profiles?

Save or discard unsaved changes first. Order Editing blocks profile switching while a draft has pending changes.

# Can I change typography here?

No. Manage typography in Shopify's checkout editor, then reload the profile in Order Editing.

# Does Save Branding make the checkout live?

No. It saves the selected draft profile. Publish the profile through Shopify after full review.

# Why is a checkout extension missing from the preview?

Confirm the extension is added and enabled in the Shopify checkout editor for that profile. Checkout Branding changes appearance, not extension installation.

## Related

- [How to Customize Your One-Click Upsell Page](https://docs.orderediting.com/en/articles/15323698-how-to-customize-your-one-click-upsell-page.md)
- [Upsell Customer Targeting](https://docs.orderediting.com/en/articles/14466316-upsell-customer-targeting.md)
- [Understanding Upsell Strategy Matching](https://docs.orderediting.com/en/articles/14391612-understanding-upsell-strategy-matching.md)
- [Creating an Upsell Strategy](https://docs.orderediting.com/en/articles/14466314-creating-an-upsell-strategy.md)
- [Configuring Upsell Settings](https://docs.orderediting.com/en/articles/14466307-configuring-upsell-settings.md)