Shopify Checkout Extensibility: The Developer Guide for 2026

Checkout.liquid is officially unsupported for the information, shipping, and payment checkout steps. Shopify deprecated it in August 2024, and the Thank You and Order Status pages follow by August 2026. If you are still running checkout customizations on checkout.liquid, you are on borrowed time.

Checkout Extensibility is the replacement, and it is fundamentally different in architecture. Instead of editing a monolithic Liquid template where you could inject arbitrary HTML, CSS, and JavaScript, you now build sandboxed extensions using TypeScript and React components that Shopify controls, validates, and renders inside a secure checkout environment.

As a Shopify Partner that has migrated multiple Plus stores from checkout.liquid to Extensibility, we have learned what the documentation does not tell you. This guide covers the real developer experience — the architecture, the code, the gotchas, and the migration path.

The Two Layers: Checkout UI Extensions and Shopify Functions

Checkout Extensibility is not one thing. It is two distinct systems that do different jobs:

Checkout UI Extensions — the frontend layer. These render custom UI components at defined points in the checkout flow. Think: informational banners, custom fields, upsell blocks, loyalty program displays, gift message inputs. They run in a sandboxed iframe-like environment with no access to the real DOM.

Shopify Functions — the backend layer. These execute custom business logic server-side during checkout. Think: custom discount rules, payment method filtering, shipping rate customization, cart validation. They run in WebAssembly (Wasm) for performance and security.

Most checkout customizations require one or both. A custom upsell at checkout needs a UI Extension to display the offer and a Shopify Function to apply the discount when the customer accepts.

Checkout UI Extensions: Architecture Deep Dive

The Sandbox Model

UI Extensions run in isolation. They cannot:

• Access the checkout DOM
• Inject arbitrary HTML or `