How to actually customize Shopify checkout in 2026 — Branding API, UI Extensions and Functions, end-to-end

Customizing Shopify checkout in 2026 looks nothing like it did in 2022. The checkout.liquid era is over; the new model is split across three different surfaces and most people don’t know which one to use for what. This guide is the cheat sheet we wish we’d had.

The mental model

Whatever you’re trying to do at checkout, it falls into one of three buckets:

Visual/branding — colours, fonts, corner radius, logo, spacing. → Branding API.
Custom UI — trust badges, gift messages, custom fields, upsells, banners. → Checkout UI Extensions.
Logic/rules — discounts, shipping rules, payment method visibility. → Shopify Functions.

If you find yourself reaching for a fourth approach, you’re probably doing it wrong.

Branding API — for everything visual

The Branding API replaces 80% of what people used checkout.liquid for. It’s a structured way to override Shopify’s checkout styling without touching markup.

You can configure it in two places:

Shopify admin — Settings → Checkout → Customize. Good for non-technical merchants.
Branding API directly — for agencies controlling things like opacity, custom CSS variables, hover states.

A common mistake: agencies still write custom CSS to style checkout. Don’t. The Branding API exposes most of what you need as proper tokens. If you can’t do it via the API, ask whether you should be doing it at all — Shopify is deliberately limiting the surface to keep checkout secure and stable.

Checkout UI Extensions — for custom UI

When you need actual UI elements at checkout — a custom field for monogram engraving, a gift message picker, a trust banner — you build a Checkout UI Extension.

These are React components that render at predefined extension points. You deploy them via the Shopify CLI:

npm init @shopify/app@latest
shopify app generate extension --type checkout-ui-extension
shopify app deploy

Extensions render in a sandboxed frame, can’t see other apps’ data, and are fully approved by Shopify’s app review process for the storefront tier. That sandboxing is the trade-off — you’re more secure but more constrained than the old checkout.liquid days.

A few things that surprise teams:

You can’t render arbitrary HTML. Extensions use Shopify’s component library (Banner, BlockStack, Checkbox, etc.) — not raw JSX.
Persistent data lives in cart attributes or metafields. If your extension needs to remember something across pages, write it to the cart attributes API.
Extensions don’t run on Thank You page by default — that’s a separate target.

Shopify Functions — for logic

Anything that used to live in Script Editor — discount logic, shipping rate adjustments, payment method visibility rules — now lives in Shopify Functions. They run at Shopify’s edge, in WebAssembly, written in Rust or JavaScript.

Common functions:

Discount Function — “10% off when cart contains a subscription product.”
Shipping Function — “Hide express shipping for orders under $50.”
Payment Function — “Hide PayPal for B2B customers.”

If you can’t express your logic with cart, customer, and product data, Functions probably won’t help — you’ll need a server-side webhook flow instead.

A real-world example

A jewellery client wanted three things at checkout:

The store’s gold accent applied to all primary buttons.
A custom field for “engraving text” on engravable products.
Hide standard shipping when cart total > $1,500 (force express).

The build:

Branding API: set colors.primary.background to the brand’s gold, cornerRadius to a smaller value, custom checkout font.
Checkout UI Extension: a TextField rendered above the contact form, conditional on the cart containing engravable variants. Stored to cart.attributes.engraving.
Shipping Function: a 30-line Rust function returning null for the standard shipping rate when subtotal > 1500.

Total time: about 12 hours of dev. Total Shopify approval: zero — Functions and the Branding API don’t need app review for a single-store install.

Common mistakes to avoid

Trying to inject custom JS into checkout. You can’t, and you shouldn’t try. Use a UI Extension.
Not testing in a draft order. The Customer Accounts checkout flow is subtly different from guest checkout.
Forgetting that Subscriptions checkout is a different surface in many cases — test both.
Hard-coding currency or locale strings. Use Shopify’s i18n primitives.

The takeaway

Custom checkout in 2026 is both more constrained and more powerful than the old checkout.liquid days. You can ship faster, you’ll break less in updates, and the whole thing is meaningfully more secure — but only if you stop trying to write checkout the way you used to.