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:
Open Settings > Checkout in Shopify admin.
In Configurations, select Edit for the configuration you want to change.
Open Settings in the checkout editor.
Adjust the relevant color or typography setting.
Review the preview and save when ready.
Shopify's checkout style guide 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
Open the checkout profile picker.
Review the profile name and publication state.
Select a Draft profile.
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.
Color | Intended use |
|---|---|
Brand | Primary branded controls and prominent interface elements |
Accent | Secondary emphasis and interactive accents |
Success | Successful or completed states |
Warning | Information that needs caution or attention |
Critical | Errors or high-priority destructive states |
Info | Informational states and messages |
Open Global colors.
Select a token.
Enter or choose a valid color value.
Review contrast and meaning in the preview.
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.
Open Scheme 1.
Review the base, button, form, and related supported colors.
Update the required values and check the main checkout preview.
Open Scheme 2.
Update the order-summary colors.
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.
Token | What it affects |
|---|---|
Base | The default rounding used across supported components |
Small | Smaller controls and component details |
Large | Larger containers or prominent components |
Open Corner radius.
Enter a number for each token you want to change, such as
8or0. Order Editing displays and saves the value in pixels.Use
0for square corners.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:
Save or discard any current Order Editing branding changes.
Open Shopify's checkout editor for the draft profile.
Update the typography there.
Save the Shopify profile.
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
Review all changed sections.
Select Save.
Wait for confirmation that the profile was saved.
Open Shopify's checkout editor.
Preview the complete draft profile at desktop and mobile sizes.
Add a product to the cart and continue to checkout with the installed Order Editing extensions.
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
Reopen the draft profile in Order Editing and confirm the saved values remain.
Open the same draft in Shopify's checkout editor.
Confirm the colors and radius values appear as expected.
Preview checkout with a test product.
Check Order Editing extensions, form errors, payment states, and the order summary.
Publish the profile through your normal Shopify change process.
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.