Shopify Checkout Extensibility 2026: Migrate from checkout.liquid and Build Custom Checkout

For years, Shopify's locked checkout was the platform's most cited limitation. Merchants who needed custom fields, branded upsells, loyalty point redemption at checkout, or conditional shipping logic had two options: build on Magento, or accept that Shopify's checkout could not be touched. That constraint shaped hiring decisions, platform choices, and entire technology stacks.

Checkout Extensibility changed that. Introduced progressively between 2022 and 2024, it gives developers structured, supported access to the Shopify checkout surface — without breaking PCI compliance or requiring merchants to maintain custom checkout code through every Shopify update. In 2026, it is the only supported way to customise the Shopify checkout. Shopify deprecated checkout.liquid for Shopify Plus stores in August 2024, and non-Plus stores lost checkout.liquid support on the same timeline for new theme installations.

If your store still relies on checkout.liquid customisations — custom fields, injected scripts, custom CSS overrides — you are running on borrowed time. This guide explains exactly what Checkout Extensibility is, what you can build with it, how to migrate from checkout.liquid, and what to look for when hiring a developer to do the work.

1. What Is Shopify Checkout Extensibility?

Checkout Extensibility is Shopify's framework for customising the checkout experience through supported, sandboxed extension points rather than direct theme file modifications. It replaces checkout.liquid — the old approach where developers could edit checkout HTML and inject arbitrary JavaScript directly into the checkout page.

The core insight behind Checkout Extensibility is separation of concerns. Shopify owns and maintains the checkout infrastructure — payment processing, security, fraud detection, PCI compliance, and performance. Developers own the customisation logic — what fields appear, what content blocks show, what discounts apply, and what the page looks like. These concerns no longer share the same file.

This matters for merchants because Shopify can now update its checkout infrastructure without breaking custom code. Under the old checkout.liquid model, a Shopify platform update could silently break a custom checkout that a developer had painstakingly built. With Checkout Extensibility, Shopify's updates and merchant customisations are isolated from each other by design.

Checkout Extensibility is available on Shopify Plus. Standard Shopify plans can use checkout branding (colours, fonts, logo) but not UI extensions or Functions at checkout. If checkout customisation is a requirement, Shopify Plus is not optional.

2. The checkout.liquid Deprecation: What Changed and When

August 2024 was the deadline for Shopify Plus merchants to migrate off checkout.liquid. Shopify gave merchants and developers roughly two years of notice, migration documentation, and tooling — but many stores still arrived at the deadline with incomplete migrations or custom checkouts that had not been fully replaced.

What exactly was deprecated: the checkout.liquid, thank_you.liquid, and order_status.liquid theme files. These files allowed direct HTML and Liquid template modification of the checkout pages. Any store using these files for custom fields, injected scripts, tracking pixels, upsell banners, or styling overrides needed to rebuild those customisations using Checkout Extensibility or lose them.

What was not deprecated: Checkout Extensibility itself, which is the replacement. The deprecation was not "you cannot customise checkout" — it was "you cannot customise checkout by editing Shopify's template files directly."

If you are a Shopify Plus merchant who missed the migration deadline, your existing checkout.liquid customisations may still be rendering — Shopify did not forcibly remove them immediately — but they are unsupported, will not receive fixes from Shopify, and will eventually stop working as the underlying checkout infrastructure evolves. The safe path is migration, not delay.

3. What You Can Build With Checkout Extensibility

Checkout Extensibility exposes several distinct extension surfaces, each serving different customisation needs.

Checkout UI Extensions allow you to add custom UI components to specific positions within the checkout flow. You can add content blocks, custom fields, banners, and interactive elements to positions including: before and after the contact information section, before and after the shipping address, before and after the shipping method selector, before and after the payment method, and in the order summary sidebar. Extensions are built in React using Shopify's checkout UI component library.

Shopify Functions allow you to replace Shopify's default logic for discounts, shipping rates, payment methods, and cart transformations with custom logic that runs in Shopify's infrastructure. A Function runs server-side in a Wasm sandbox — it is not client-side JavaScript. Examples include: custom discount types beyond Shopify's native discount rules, hiding or renaming payment methods based on cart contents or customer tags, custom shipping rate calculations, and cart line item transformations.

Post-Purchase Extensions appear on the thank-you page immediately after order completion. They are the supported replacement for post-purchase upsells and offers that were previously injected via checkout.liquid. A post-purchase extension can offer a one-click upsell, capture survey responses, or display loyalty point accruals without requiring a new checkout flow.

Checkout Branding API controls the visual appearance of the checkout: colours, typography, button styles, corner radius, and logo placement. This is available on all Shopify Plus plans and gives merchants tight visual control without requiring a UI extension.

4. Checkout UI Extensions in Depth

UI Extensions are the most commonly requested part of Checkout Extensibility. They handle the visual and interactive elements that merchants want to add to checkout.

Building blocks. Extensions are React components built using Shopify's checkout UI component library — a set of opinionated components (Text, Button, TextField, Checkbox, Banner, InlineLayout, BlockLayout, etc.) that render consistently across Shopify's checkout environments. You cannot use arbitrary HTML or external CSS — all components are provided by Shopify's library. This constraint is intentional: it ensures extensions cannot break checkout layout or introduce accessibility issues.

Extension targets. Each extension specifies one or more targets — positions in the checkout where the extension renders. Targets are named by section and position: "purchase.checkout.contact.render-after" renders after the contact information block, "purchase.checkout.shipping-option-list.render-after" renders after the shipping options list, and so on. An extension can render at multiple targets simultaneously.

Reading and writing checkout data. Extensions have access to checkout data via the useCheckout hook — cart lines, customer information, shipping address, selected shipping method, applied discounts, and more. Extensions can write custom attributes to the checkout (visible in order metafields) but cannot modify cart lines, prices, or payment amounts — that is the domain of Shopify Functions.

Communicating with external APIs. Extensions can make fetch requests to external APIs or Shopify's own APIs from within the extension. Common use cases include: validating a custom field value against a backend service, fetching personalised content based on cart contents, and recording analytics events to an external endpoint.

5. Shopify Functions in Depth

Shopify Functions are the replacement for custom server-side checkout logic that merchants previously achieved through Magento modules, custom checkout backends, or Script Editor (which was deprecated at the same time as checkout.liquid for most use cases).

How Functions work. A Function is a WebAssembly module that runs inside Shopify's infrastructure at specific points in the checkout process. You write the function logic in JavaScript or Rust (compiled to Wasm), deploy it as a Shopify app, and install it on the merchant's store. When the checkout reaches the Function's trigger point, Shopify calls your Wasm module with the current checkout state as input and expects a structured output that modifies the checkout behaviour.

Discount Functions are the most commonly used. They allow you to create custom discount types that go beyond Shopify's built-in discount rules — BOGO with custom conditions, spend-and-save tiers based on product tags, bundle discounts, and discount stacking logic. Before Functions, achieving this required Script Editor (now deprecated) or a third-party app.

Delivery Customisation Functions allow you to hide, rename, or reorder shipping options based on cart contents, customer data, or any logic you define. A common use case: hiding express shipping for oversized items, or showing a local pickup option only when the cart contains items tagged as pickup-eligible.

Payment Customisation Functions allow you to hide or rename payment methods based on order value, customer tags, or country. Examples: hiding buy-now-pay-later options for orders over $5,000, showing specific payment methods only to B2B customers, or hiding cash-on-delivery for international orders.

Cart Transform Functions allow you to expand a single cart line into multiple lines, or merge multiple lines into a bundle. This is the mechanism behind custom bundle builders that need to break a bundle product into its individual component lines for fulfilment.

6. Migrating from checkout.liquid: Step-by-Step

Migrating an existing checkout.liquid implementation is a structured process. The complexity depends entirely on what your current checkout.liquid does.

Step 1: Audit your existing customisations. Open your current checkout.liquid, thank_you.liquid, and order_status.liquid files and catalogue every customisation: custom fields, injected scripts, tracking pixels, CSS overrides, upsell banners, custom messaging, and any JavaScript that fires on checkout events. Each item needs to be classified as a UI Extension, a Function, a post-purchase extension, or handled via Checkout Branding.

Step 2: Map each customisation to its Checkout Extensibility equivalent. Custom input fields become UI Extensions with TextField components. Conditional messaging based on cart contents becomes a UI Extension reading from useCheckout. Custom discount logic becomes a Discount Function. Post-purchase upsells become Post-Purchase Extensions. Tracking pixels and analytics scripts that fired on the checkout page need to move to Shopify Web Pixels — the supported mechanism for client-side analytics at checkout.

Step 3: Build and test in a development store. Build each extension and function in a Shopify development store before touching production. Use Shopify CLI to scaffold, develop, and preview extensions locally. The Shopify CLI checkout extension dev command runs a local development server with hot reload against a real checkout flow.

Step 4: Validate functionality end-to-end. Test every customised flow with real transactions in a staging environment. Custom fields should appear in order metafields. Discount Functions should apply correctly across all eligible cart states. Post-purchase extensions should render correctly after order completion.

Step 5: Deploy and monitor. Deploy extensions via the Shopify CLI or Partner Dashboard. Monitor the Shopify admin for extension errors after launch. Set up alerts for checkout conversion rate — a drop in checkout completion rate after deploying extensions is the primary signal of an implementation issue.

7. Checkout Branding: Matching Your Store Design

The Checkout Branding API gives merchants control over the visual presentation of the checkout without writing UI Extensions. It is the right tool for visual alignment — making the checkout look like the rest of your store — while UI Extensions handle functional additions.

What you can control: Primary and secondary colours, background colour, form field styling (border radius, border colour, focus states), button appearance (colour, text colour, corner radius), typography (font family, weight, size), logo placement and size, and section divider styling.

What you cannot control via branding: Layout structure, the order of checkout steps, content within Shopify's native checkout components (address fields, payment form), and any element that affects PCI scope. These remain under Shopify's control to maintain compliance.

For most merchants migrating from checkout.liquid, the Branding API handles 80% of the visual customisation work. CSS overrides that were injected via checkout.liquid for colours, fonts, and button styling all move here. The remaining 20% — custom components, banners, and fields — moves to UI Extensions.

8. Web Pixels: Replacing Checkout.liquid Tracking Scripts

One of the most common uses of checkout.liquid was injecting third-party tracking scripts — Google Analytics, Meta Pixel, TikTok Pixel, Klaviyo, and others — directly into the checkout page. This approach broke with the deprecation.

The replacement is Shopify Web Pixels — a sandboxed JavaScript environment for running analytics and tracking code at checkout without accessing the DOM directly. Web Pixels receive checkout events (checkout_started, checkout_completed, payment_info_submitted, etc.) as structured data and can forward them to any analytics endpoint.

Major platforms — Google Analytics 4, Meta, TikTok, Klaviyo, Pinterest — all have first-party Web Pixels available in the Shopify App Store. For custom tracking requirements not covered by existing pixels, you can build a custom Web Pixel using the Shopify CLI.

The key difference from the old approach: Web Pixels cannot access the checkout DOM, cannot read raw page content, and run in a sandboxed iframe. This is the trade-off Shopify made to maintain checkout security and performance while still allowing tracking. For merchants whose entire analytics stack ran through checkout.liquid script injection, a Web Pixel audit and rebuild is a significant but necessary part of the migration.

9. Testing Your Checkout Extensions

Testing checkout extensions requires a systematic approach because errors in checkout can directly reduce conversion rates.

Unit testing Functions. Shopify Functions can be unit tested using Shopify's function testing framework. Write input JSON files representing different cart states and verify that your function returns the expected output for each scenario. Cover edge cases: empty carts, single-item carts, carts with multiple discount codes, and carts containing products from multiple collections.

End-to-end testing UI Extensions. Use a Shopify development store with test payment methods enabled. Walk through every checkout flow that involves your extensions: entering custom field values, verifying they appear in order metafields after checkout, verifying banners render at the correct target positions, and verifying that extension errors do not break the core checkout flow.

Conversion rate monitoring. After deploying to production, monitor checkout completion rate (add-to-cart to purchase) daily for the first two weeks. An unexpected drop is the primary signal of an extension issue. Shopify's analytics dashboard shows checkout funnel metrics; supplement this with your own analytics event tracking via Web Pixels.

Load testing. If your UI Extensions make external API calls, load test those endpoints before peak sale periods. An extension that calls a slow or unavailable API will degrade checkout performance — Shopify imposes timeouts on extension network requests, and a timeout will cause the extension to fail silently rather than blocking checkout.

10. Performance and Compliance Considerations

Checkout Extensibility was designed to maintain Shopify's checkout performance standards. Extensions that violate these standards can be rejected or throttled.

Performance budget. Shopify's checkout targets sub-3-second load times on mobile connections. UI Extensions contribute to this budget. Extensions with large JavaScript bundles, slow external API calls, or excessive rendering complexity will exceed the budget and hurt conversion. Keep extension bundles small, lazy-load non-critical content, and ensure any API calls complete within 2 seconds.

PCI DSS compliance. Shopify's checkout maintains PCI Level 1 compliance. Extensions run in a sandboxed environment that prevents them from accessing payment data — card numbers, CVVs, and expiry dates are never accessible to extension code. This is by design. Any extension that attempts to capture payment-adjacent data will be rejected by Shopify's app review process.

App review for public distribution. Extensions distributed through the Shopify App Store go through Shopify's app review process, which checks for compliance with checkout extension policies, performance requirements, and data handling rules. Private app extensions installed directly on a single store bypass public app review but are still subject to Shopify's runtime policies.

11. How Much Does Checkout Extensibility Development Cost?

Checkout Extensibility development costs depend heavily on the number and complexity of customisations being built or migrated.

The biggest cost driver is the complexity of existing checkout.liquid logic. A checkout with five injected tracking scripts, two custom fields, a post-purchase upsell, and custom shipping logic is a materially different project from one with only a logo and colour customisation.

Developers who have not built Checkout Extensions before will spend significant time on the learning curve. When hiring, look for demonstrated experience — deployed extensions, published apps, or a portfolio of Plus merchant work.

12. Hiring a Checkout Extensibility Developer: What to Look For

Checkout Extensibility is a specialist skill within Shopify development. Not every Shopify developer has built extensions, and the gap between a developer who has shipped checkout extensions and one who has only built themes is significant.

React is mandatory. Checkout UI Extensions are React components. A developer without strong React skills cannot build them effectively. Verify React experience directly — ask for examples of React applications or components they have built outside the Shopify ecosystem.

Ask about Shopify Functions specifically. Functions require understanding of WebAssembly constraints, input/output schemas, and Shopify's function testing framework. A developer who has only built UI extensions will struggle with complex Function logic. Ask which Function APIs they have worked with: Discount, Delivery, Payment, or Cart Transform.

Require a checkout.liquid migration example. If you are migrating existing customisations, ask candidates to walk you through a previous checkout.liquid migration they completed. The right answer covers the audit process, the mapping decisions, the testing approach, and how they handled edge cases — not just "I rebuilt it in Checkout Extensibility."

Verify Shopify Plus experience. Checkout Extensibility only exists in the Shopify Plus context. A developer without Plus experience may understand the technical APIs but lack the broader context of Plus merchant requirements, SLA expectations, and approval processes. Look for developers with verifiable Plus client history.

Test with a scoping exercise. Before committing to a full engagement, ask your shortlisted developer to scope your specific checkout migration. A well-scoped proposal that identifies your existing customisations, maps each to its Extensibility equivalent, estimates hours by deliverable, and flags risks demonstrates the judgment you need — not just technical ability.