Shopify Checkout Branding requires Shopify Plus.
Your staff account needs permission to manage checkout branding.
You can edit only draft checkout profiles from Order Editing. A published profile is read-only.
Typography is shown for context but is managed in Shopify's checkout editor.
Coordinate changes with anyone else editing the same checkout profile.
In the Shopify admin, go to Apps > Order Editing.
Select App Settings.
Open the Global settings area and go to Branding.
Find Checkout Branding.
Select Manage Checkout Branding.
Order Editing loads your Shopify checkout profiles. The published main profile is selected automatically when available, but it remains read-only. Choose a draft profile to make changes.
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.
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.
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.
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 8 or 0. Order Editing displays and saves the value in pixels.
Use 0 for 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.
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.
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.
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.
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.
The selected profile is probably published, or your account lacks the required Shopify Plus or staff permission. Select a draft profile and check permissions.
Save or discard unsaved changes first. Order Editing blocks profile switching while a draft has pending changes.
No. Manage typography in Shopify's checkout editor, then reload the profile in Order Editing.
No. It saves the selected draft profile. Publish the profile through Shopify after full review.
Confirm the extension is added and enabled in the Shopify checkout editor for that profile. Checkout Branding changes appearance, not extension installation.
