Your post-purchase offer page automatically matches your Shopify checkout branding. This is enforced by Shopify for all post-purchase apps: the page should feel like a seamless part of your checkout. That is why there are no color or font settings inside Post Purchase Upsell Hero itself, except for the banner section, which has its own background color and title visibility setting in the Offer Editor, and the Font setting under Page Layout (see below).
The good news: you have full control via the Shopify checkout editor, and every change applies to the upsell page too.
Where to change colors and fonts
In your Shopify admin, go to Settings > Checkout.
Click Edit / Customize on your live checkout profile.
Adjust the settings listed below and save.
Which checkout setting controls which element
Shopify checkout setting | Controls on the post-purchase page |
|---|---|
Logo (image, position, size) | The store logo at the top of the page |
Main content area: background color | The page background |
Order summary: background color | The offer summary background |
Typography: headings | Offer and product headings |
Typography: body | Body text |
Colors: accents | Links, highlights and checkmarks |
Colors: buttons | The "Add to order" (Buy CTA) and next-step buttons |
Form fields | The variant and quantity form fields |
Use one font for the whole page
If your checkout uses a decorative heading font that looks out of place on the offer page, switch the offer to a single font. Open the offer in the Offer Editor and find the Font select under Page Layout:
Checkout Branding (default): headings and body text use the fonts from your Shopify checkout.
Shopify Default (Inter): headings and body text on the offer page use Inter.
The setting changes the offer page only. Your checkout keeps its fonts.
The editor preview shows the checkout fonts only on Shopify Plus, because it needs the checkout branding API. On other plans the live post-purchase page still applies your choice.
About the button (Buy CTA)
The background color of the upsell button always matches the button color of your Shopify checkout (Colors: buttons). The text color of the button is set automatically by Shopify based on the background color, to keep the label readable. It cannot be overridden.
Preview vs. live
Our editor preview may show minor differences, but on a live offer the branding always matches your Shopify checkout settings. Before you rely on it, place a test order and check the live page once.