All posts
Shopify App Development

Shopify Checkout Components Explained: What Merchants Need to Know in 2026

Checkout Components — Shopify's Checkout UI Extensions — are the modern, supported way to customize checkout: sandboxed React-style components that add banners, custom fields, and upsells without touching checkout.liquid. Here's what they are, what you can build, why the new model is safer, and what's available on your plan in 2026.

AD Digitech Engineering · Shopify App TeamJuly 8, 2026Updated November 3, 20265 min read
Infographic explaining Shopify Checkout Components — the fragile old way of editing checkout.liquid (hard to maintain, risky, upgrade-breaks) replaced by a modern checkout with modular components (trust banner, gift message, upsell offer, loyalty rewards) built on the three surfaces of Checkout Extensibility: Checkout UI Extensions, Shopify Functions, and the Branding API, with benefits like secure sandboxing, modularity, upgrade safety, and better conversions

The short version: Checkout Components — Shopify's Checkout UI Extensions — are the modern, supported way to customize your checkout. They're sandboxed, React-style components that drop banners, custom fields, and upsells into defined checkout slots, without ever touching checkout.liquid. Here's what they are, what you can build, and what your plan unlocks.

We build Shopify checkout extensions and Functions, so here's the practical explainer.

Why this exists: checkout.liquid is gone

For years, deep checkout customization meant editing checkout.liquid — hand-written code injected into the checkout page. It was powerful but fragile: it broke on platform updates, was hard to keep PCI-safe, and Shopify has retired it on its own timeline: it's no longer supported for the Information, Shipping, and Payment steps, and it was sunset for the Thank you and Order status pages on August 28, 2025. Shopify Scripts, a separate tool, stopped executing on June 30, 2026. (If you're still on either, see our Scripts-to-Functions migration guide.)

Checkout Extensibility is the replacement — and Checkout Components are the most visible part of it.

What "Checkout Components" actually are

Checkout Components are React-style UI components that render in specific, Shopify-defined slots of the hosted checkout — think informational banners, custom input fields, content blocks, and upsell modules. Formally they're Checkout UI Extensions, and they're the frontend layer of the broader Checkout Extensibility framework.

Instead of writing free-form code into the checkout page, you build a component and Shopify renders it, in a supported slot, through its own engine.

The three surfaces of Checkout Extensibility

Checkout Components don't work alone. Extensibility gives you three tools, and most real customizations use a combination:

SurfaceWhat it does
Checkout UI Extensions (Components)The frontend — render custom UI (banners, fields, upsells, loyalty displays) in checkout slots.
Shopify FunctionsServer-side logic that runs on cart and checkout events — custom discounts, shipping, and payment rules.
Branding APIControlled styling of the hosted checkout — colors, typography, and layout within Shopify's guardrails.

Components handle what the customer sees; Functions handle the logic; the Branding API handles how it looks. (For when a Function is the right tool vs. a full app, see Shopify Functions vs Apps.)

What you can actually build

The practical, revenue-relevant things merchants add with Checkout Components:

  • Trust & info banners — shipping cutoffs, guarantees, delivery promises.
  • Custom fields — gift messages, delivery instructions, PO numbers, VAT IDs.
  • Upsells & cross-sells — in-checkout offers and add-ons.
  • Loyalty & rewards — points balances, redemption prompts.
  • Custom delivery & payment logic — via Functions (hide/reorder/rename methods, conditional rules).
  • Thank-you / order-status content — order tracking, surveys, and post-purchase upsells after the order is placed.

Why the new model is genuinely better

This is the part that matters most to merchants, even non-technical ones:

  • It's secure by design. Extensions run in an isolated sandbox — separate from the checkout page and from each other — with no access to sensitive payment information or the checkout page itself. Custom code can't compromise customer data the way checkout.liquid could.
  • It's upgrade-proof. Because Shopify renders your component through its own engine, your customization survives platform upgrades instead of silently breaking after an update.
  • It's faster and cleaner. Sandboxed, component-based extensions avoid the performance and maintenance drag of injected checkout code — and keep you aligned with the Built for Shopify performance bar.

In short: you get customization power without the fragility and PCI risk of the old approach.

What's available on your plan

Good news for smaller stores — you're not locked out:

  • Basic, Grow, Advanced and Plus: apps that add checkout UI extensions to the thank you and order status pages, public App Store apps built with Shopify Functions (for example discount, delivery or payment logic), post-purchase apps, and Shopify's free Checkout Blocks app (with some feature restrictions).
  • Shopify Plus only: apps that customize the information, shipping and payment pages (including checkouts from draft orders), custom apps built with Shopify Functions, and checkout styling customizations.

So stores on Basic, Grow and Advanced can extend the pages after checkout; customizing the checkout steps themselves, and building your own Functions apps, is a Plus capability. (For where the Plus line sits overall, see Shopify Plus vs Shopify.)

How merchants actually get them

Two paths, depending on how custom your need is:

  1. Install an app — most common checkout needs (upsells, custom fields, trust badges, loyalty) are covered by App Store apps built on Checkout UI Extensions. No code, fast to deploy.
  2. Build a custom extension — for bespoke UI or logic an app can't do, a developer builds a custom Checkout UI Extension (plus Functions for custom rules). Same supported framework, tailored to you.

Either way, you're on Shopify's supported, upgrade-safe foundation — not brittle checkout hacks.

If you're still on checkout.liquid

Then this is your migration path, and the clock has run out: Shopify no longer supports checkout.liquid for the Information, Shipping, and Payment steps, and it was sunset for the Thank you and Order status pages on August 28, 2025. Any checkout customization you relied on there needs rebuilding as Checkout UI Extensions, Functions, and Branding API — the exact move covered in our Scripts-to-Functions migration guide.

We build and migrate Shopify checkout experiences end to end — custom Checkout UI Extensions, Functions, and branding, plus the migration off checkout.liquid. See our Shopify app development and Shopify store development work, or talk to us about your checkout.

Frequently asked questions

What are Shopify Checkout Components?

They're React-style UI components that render in defined slots of the Shopify checkout — informational banners, custom fields, content blocks, and upsells. They're the frontend part of Shopify's Checkout Extensibility framework (formally called Checkout UI Extensions), and they let you add custom UI to checkout without editing checkout.liquid.

What is Checkout Extensibility?

Checkout Extensibility is Shopify's modern, supported framework for customizing the hosted checkout, replacing the old checkout.liquid template-editing approach. It has three surfaces: Checkout UI Extensions (React-style frontend components), Shopify Functions (server-side logic that runs on cart and checkout events), and the Branding API (controlled styling of the hosted checkout).

What can I add to my Shopify checkout with them?

Common examples: informational or trust banners, custom input fields (gift messages, delivery instructions, PO numbers), upsell and cross-sell blocks, loyalty and rewards displays, and — via Functions — custom discount, shipping, and payment logic. You can also add content and post-purchase upsells to the thank-you / order-status page.

Do Checkout UI Extensions require Shopify Plus?

For the checkout steps themselves, yes. Apps that add checkout UI extensions to the information, shipping and payment pages are available only on Shopify Plus. On the Basic, Grow, Advanced and Plus plans, you can use apps that extend the thank you and order status pages, public App Store apps built with Shopify Functions, and post-purchase apps. Custom apps built with Shopify Functions and checkout styling customizations are Plus-only.

Are Checkout UI Extensions secure?

Yes — security is a core reason they exist. Extensions run in an isolated sandbox, separate from the checkout page and from each other, and have no access to sensitive payment information or the checkout page itself. They render through Shopify's own engine, so they can't compromise customer data the way custom checkout.liquid code could — and they survive platform upgrades without breaking.

How do I add Checkout Components to my store?

Two routes. For common needs, install an app from the Shopify App Store that's built on Checkout UI Extensions — no code, covers most cases. For bespoke requirements, have a developer build a custom checkout extension (and Functions, if you need custom logic). Both deliver as app extensions on the same supported framework.

Have a project in mind?

Building something on Shopify?

We design, build, and maintain Shopify apps, stores, and AI products — to the standard this article describes.

Related reading

Shopify App Development 4 min

Shopify Scripts Are Deprecated: How to Migrate to Shopify Functions (Complete Guide)

Shopify Scripts stopped executing on June 30, 2026. What's affected, how to audit old Scripts, the three paths to Shopify Functions, and a cutover plan.

Read article
Shopify App Development 5 min

Shopify Functions vs Traditional Apps: Which Solution Is Right for Your Store?

Shopify Functions run custom logic natively on Shopify's infrastructure; traditional apps run on external servers with full flexibility. Here's a practitioner's guide to which to use, when to combine them, and what changed after Shopify Scripts were retired on June 30, 2026.

Read article
Shopify App Development 8 min

Shopify App vs Custom App: When Your Store Needs Custom Development

When is an existing Shopify App Store app enough, and when does your store need a custom app? Signs, costs, platform limits and a checklist for merchants.

Read article
Shopify App Development 5 min

How to Get Built for Shopify Certified: A Practitioner's Guide

What the Built for Shopify badge actually requires in 2026 — the performance, design, and integration bars — and the step-by-step path to earning and keeping it, from a team that builds Shopify apps.

Read article
Shopify Store Development 7 min

Shopify Plus vs Shopify: When the Upgrade Pays Off (2026)

A practitioner's guide to choosing between standard Shopify and Shopify Plus in 2026 — current pricing, the Plus-only features that actually matter, and the specific signals that mean it's time to upgrade (and when it isn't).

Read article
Shopify Store Development 8 min

Shopify Checkout Changes in 2026: What Merchants Need to Review Before the Holiday Rush

A practical 2026 Shopify checkout audit: what changed this year in payments, taxes, international, and B2B — and exactly what to review and test before peak season.

Read article
Shopify Store Development 7 min

Shopify Plus Upgrade: 10 Signs Your Store Is Ready to Move Beyond Shopify

Not sure if you need Shopify Plus? Ten operational readiness signals — multi-store, complex B2B, checkout, automation, governance — to self-assess whether Plus solves a real problem or you'd be paying for capabilities you don't need.

Read article
Shopify Store Development 5 min

Shopify B2B in 2026: Is Shopify Ready for Serious Wholesale Businesses?

Shopify B2B had a big 2026: native wholesale features are no longer Plus-only, and the Winter '26 Edition added more B2B features for larger wholesalers. So is Shopify ready for serious wholesale? For many brands, yes — here's what you get, where the real scale line sits, and the honest limitations to know before you commit.

Read article
Shopify Store Development 8 min

Shopify Shop Checkout Gets Faster: What Merchants Need to Know

Shopify's October 5, 2026 Shop update brings faster checkout and carts that sync across devices. See how it works, who qualifies and what to check before BFCM.

Read article