settings_schema.json, doesn’t load your theme’s CSS, and doesn’t render Liquid. To make it look like Voyager you configure it in Settings → Checkout → Customize.
The good news: Shopify Checkout’s branding API exposes everything Voyager needs — colors, typography, logo, corner radius, form field style. The values below produce a Checkout that reads as a continuous extension of the storefront.
Where to set everything
1
Open Checkout customization
Shopify admin → Settings → Checkout → Customize (top right).
2
Pick the right checkout profile
Most stores have one profile. If you have multiple (e.g., Shopify Plus draft orders), each one needs its own branding.
3
Walk the panels left-to-right
Brand assets → Colors → Typography → Style settings. Save after each panel.
4
Preview, then publish
The preview shows desktop and mobile side-by-side. Publish when both read clean.
Voyager default — Editorial Navy
Use these values for the default Voyager theme style.Colors
Style settings
Alternate theme styles
If you’ve selected one of the other named theme styles in Theme settings → Theme styles, use the matching Checkout palette below.Warm Cream
Minimal Monochrome
Logo
Upload the navy variant of your Voyager logo — the one you use on cream backgrounds.Save and publish
Save each panel as you go. The Publish button is top-right of the Checkout editor. Test in an incognito window with a real product in the cart — Shopify Checkout doesn’t preview certain features (Shop Pay, accelerated checkout) until a real session.Complete preset table
For convenience, a single table you can copy into your branding handoff document.Troubleshooting
Can't save Checkout settings
Can't save Checkout settings
Nine times out of ten the cause is the logo. Shopify Checkout rejects SVGs that embed
<text> tags or external fonts — re-export your logo as a flat PNG with transparency at 480 px wide and try again.If the logo isn’t the issue, scan your hex codes. Each must start with #, contain exactly six hexadecimal characters, and have no trailing semicolon, no spaces, no comma. #002F5B is valid; #002F5B; and #002F5B are not.Italianno or my script font doesn't render on Checkout
Italianno or my script font doesn't render on Checkout
Expected. Shopify Checkout only loads fonts from its own hosted library — Google Fonts that ship with the Checkout font picker. Pick the closest available alternative; most shoppers will not perceive a mismatch in a checkout flow.
The Checkout brand color doesn't match my storefront primary
The Checkout brand color doesn't match my storefront primary
The Checkout Brand color is used for buttons and links inside Checkout. Make sure you’ve set it to the same hex as your Voyager Theme settings → Colors → Primary (ink), not a variant.
My logo looks tiny in the Checkout header
My logo looks tiny in the Checkout header
Shopify scales the logo down to fit the header height. Upload at 480 px wide minimum — Checkout’s logo box is roughly 200–240 px wide on desktop, so anything smaller looks under-resolved on Retina displays.
Order summary background bleeds into the form column on mobile
Order summary background bleeds into the form column on mobile
Mobile Checkout stacks the summary above the form, then they share the body background. The Order summary background color is only used on desktop. This is a Shopify constraint, not a Voyager issue — there’s no fix at the theme layer.
Where to next
Apps and integrations
Next surface to align — third-party apps that render in your storefront.
Internationalization
Shopify Markets, multi-currency, multi-language.