Checkout branding
This is the shortest chapter in the manual, because it’s the topic with the least flexibility.
18.1 What you can customize
Section titled “18.1 What you can customize”Almost nothing on the theme side. The checkout (/checkouts/cn/{token}) is owned by Shopify Plus — it’s a separately-rendered flow that does not use your theme’s Liquid, CSS, or JavaScript.
Branding the checkout is done in Shopify Admin → Settings → Checkout (not in the theme editor):
| Setting | Where | Effect |
|---|---|---|
| Logo | Shopify Admin → Settings → Checkout → Logo | Your store logo at the top of the checkout pages |
| Logo size | Same | Small / medium / large |
| Logo position | Same | Left / center |
| Banner image | Same | Optional banner above the checkout (some plans) |
| Background image | Same | Behind the checkout (some plans) |
| Heading color | Same | Color for “Contact” / “Shipping” / “Payment” headings |
| Body color | Same | Body text color |
| Form field background | Same | Background color for inputs |
| Form field border | Same | Border color |
| Form field border on focus | Same | Border color when input is focused |
| Buttons (primary action) | Same | Background + text color for “Continue to shipping” buttons |
| Buttons on hover | Same | Hover state |
| Corner radius | Same | Pill / rounded / square |
| Heading font | Same | Different heading font |
| Body font | Same | Different body font |
| Accent color | Same | Accent color for radio buttons, links, focus states |
Once configured, the checkout has a consistent look with the theme. Customers shouldn’t feel like they’ve left your brand.
18.2 Why the checkout is separate
Section titled “18.2 Why the checkout is separate”For PCI compliance and payment-method certification reasons, Shopify hosts checkout independently. This isn’t a Hyprism limitation — it’s true for every Shopify theme.
Older themes had a checkout.liquid file. This was deprecated in 2023, and force-migrated in 2025. All themes now go through the Settings → Checkout flow.
18.3 Brand-matching your checkout to Hyprism
Section titled “18.3 Brand-matching your checkout to Hyprism”For the cleanest customer experience, set the checkout to match your theme’s color scheme:
- Open Shopify Admin → Settings → Checkout.
- Match the heading color to your theme’s scheme.heading color.
- Match the body color to scheme.text.
- Match the button background to scheme.btn-bg.
- Match the button text to scheme.btn-text.
- Match the accent color to scheme.accent.
- Match the corner radius to your global radius (Theme settings → Layout → Global corner radius).
- Match the heading font to your theme’s heading font.
✅ This takes 10 minutes once and is well worth it — checkout brand-consistency reduces cart abandonment significantly.
18.4 Checkout extensibility (Shopify Plus)
Section titled “18.4 Checkout extensibility (Shopify Plus)”If you have a Shopify Plus plan, you can use Checkout Extensions to add custom UI to the checkout — gift-message fields, custom upsells, age-verification gates, etc.
Checkout Extensions are out of scope for this theme manual — they’re app-level customization. See Shopify’s documentation on Checkout UI extensions.
Chapter 19 — Troubleshooting and FAQ — common issues and how to fix them.