Customize your checkout branding

Before you start

• Shopify Plus or a development store. Shopify only allows checkout branding changes on Plus. On other stores, Checkout Ninja hides the Branding menu item.
• A plan that includes checkout branding. Otherwise the page shows the Upgrade The Plan pop-up. See plans and features.
• A published checkout. The page edits your published checkout profile.

Steps

1. Open Branding and allow access

1. In Checkout Ninja, click Branding in the app menu.
2. The first time, you see Allow access to checkout branding. Click Allow access and approve the permission in Shopify’s pop-up. You only do this once per store.
3. The Checkout branding editor opens. Your current settings are loaded into the form, and a Live preview shows on the right.

The editor has five tabs: Templates, Colors, Typography, Corners and Components.

2. Start from a template (optional)

1. Open Templates.
2. Click Use template on a look. The options are Classic, Minimalist Mono, Bold & Vibrant, Elegant Noir, Soft & Rounded, High Contrast, Evergreen, Seabreeze, Sunset and Midnight.
3. The template fills in colors, corners, typography and component styles. Your logo is kept. The applied template shows Applied.
4. Adjust anything in the other tabs before you save.

3. Set colors

Open Colors. Click a color to open the picker. You can drag, type a Hex value, enter R, G, B, or click a Suggested swatch. Reset to default in the picker sets the color back to Inherit, the store default.

Global colors

Group	Setting	What it colors
Brand	Brand	Buttons and primary actions
Brand	Accent	Links and focus states
Brand	Decorative	Highlights and dividers
Status	Success	Confirmations and success messages
Status	Info	Informational messages
Status	Warning	Warnings that need attention
Status	Critical	Errors and destructive actions

Color scheme 1 is the main scheme, used for the checkout surface and primary actions. Color scheme 2 is the alternate scheme, used for the order summary and contrasting sections. Each has the same settings:

Group	Settings
Surface (base)	Background (page background), Text (body text), Border (dividers and outlines), Accent (links and focus)
Form controls	Background, Border, Text (input fields), Accent (selected and focused controls)
Primary button	Background, Text, Border, Hover (fill on hover)
Secondary button	Background, Text, Border, Hover (fill on hover)

4. Set typography

Open Typography. Leave a field blank to keep the store default.

Setting	What it does	Options
Base font size	Base text size	12 to 18 px, in 0.5 px steps
Scale ratio	How quickly text sizes grow from the base size	1.0 to 1.4
Letter case	Capitalization applied to text	Default (inherit), None, lowercase, UPPERCASE, Title Case
Letter spacing	Spacing between characters	Default (inherit), Base, Loose, Extra loose

5. Set corners

Open Corners. Enter pixel values, or leave them blank to keep the store default. Components refer to these as Small, Base and Large.

Setting	Used for
Small	Tight corners: chips, small controls
Base	Default corners: inputs, cards
Large	Rounded corners: large surfaces

6. Set components

Open Components. Every dropdown starts at Default (inherit).

Section	Setting	Options
Header & logo → Logo	Logo image	Upload a non-SVG image. Leave it as it is to keep the current logo
Header & logo → Logo	Max width	Logo width cap, in pixels
Header & logo → Logo	Visibility	Visible, Hidden
Header & logo → Layout	Alignment	Start, Center, End
Header & logo → Layout	Position	Start (above), Inline, Inline secondary
Buttons → Primary button / Secondary button	Background	Solid, None
Buttons → Primary button / Secondary button	Border	Full, None
Buttons → Primary button / Secondary button	Corners	None (square), Small, Base, Large
Form controls → Fields	Border	Full, None
Form controls → Fields	Corners	None (square), Small, Base, Large
Form controls → Fields	Label position	Inside, Outside
Global override → Corners	Global corners	None (square everywhere). Overrides every corner radius above

7. Save

1. Check the Live preview. It shows a heading, form fields, a primary button and success, info, warning and error messages in your settings.
2. Click Save in the save bar at the top of the admin. You’ll see Checkout branding saved. Discard throws away unsaved changes.

To undo everything, click Reset to defaults and confirm. You’ll see Checkout branding reset to defaults.

Verify it worked

1. Open your store, add a product to the cart and go to checkout. The colors, corners and header match what you saved.
2. Check the order summary too. It uses Color scheme 2.
3. If something looks unchanged, check that the setting isn’t still Default (inherit), blank or Inherit. Those keep the store default.

Limitations

• Shopify Plus only. This is a Shopify rule for checkout branding. Development stores can test.
• No custom CSS or custom fonts. The page sets only the options on the tabs above. Shopify’s checkout doesn’t accept custom CSS from apps.
• Your published checkout only. Changes go to the checkout profile that’s live, not to draft profiles.
• SVG logos aren’t accepted. Use a PNG or JPG.
• Checkout Ninja blocks follow this branding. Blocks render with Shopify’s own checkout components, so they pick up the colors and corners you set here.

Troubleshooting

Saving shows “No published checkout profile was found to update branding for.” Checkout Ninja couldn’t find a published checkout profile to update. Check in Shopify’s checkout settings that you have a published checkout, then reload the Branding page and save again.

The page only shows “Allow access to checkout branding”. Checkout Ninja doesn’t have permission to read and change branding yet. Click Allow access and approve it in Shopify’s pop-up.

A template changed the preview but not my checkout. Templates only fill in the form. Click Save to apply them.

There’s no Branding item in the app menu. Your store isn’t on Shopify Plus or a development store, or the app is still loading your store’s plan. Full checklist.