In August 2024, Shopify executed one of the biggest technical transitions in e-commerce: the checkout.liquid file was retired. For years this file was the go-to way to customise the checkout on Shopify Plus stores, and suddenly it no longer worked. In its place came a completely new architecture: Checkout Extensibility.
This wasn't just a routine update — Shopify fundamentally redesigned its checkout architecture. The old system was liquid-based, relied on full-page reloads and had performance limitations. The new system is React-based, server-side rendered, edge-optimised and now fully integrated with the broader Shopify ecosystem.
In this guide we cover what Checkout Extensibility is, its core components, how to migrate from legacy checkout.liquid and how to use it in real-world scenarios. A technical deep-dive for Shopify Plus developers, merchants and agencies.
What Is Checkout Extensibility?
Checkout Extensibility is Shopify's next-generation development architecture for customising the checkout. Unlike the old checkout.liquid approach, this new system is modular, performant and fully integrated with Shopify's security and upgrade pipeline.
Old vs New: Core Differences
In the checkout.liquid era (pre-2023):
- Checkout HTML was rewritten via the Liquid template engine
- JavaScript was added through inline script tags
- Every Shopify checkout update risked breaking customisations
- Performance hit was real — often dragging down conversion rates
- Security audits were difficult, PCI compliance risky
- Only Shopify Plus merchants could customise
In the Checkout Extensibility era (post-2024):
- React-based components are added at checkout extension points
- Business logic (discounts, shipping, validation) is written in code via Shopify Functions
- Everything is packaged in Shopify's Extension framework and can be published to the App Store
- Shopify platform updates don't break customisations — forward-compatible
- Performance is guaranteed by Shopify with edge-optimised rendering
- PCI DSS Level 1 compliance is Shopify's responsibility
The 4 Core Components of Checkout Extensibility
The new architecture has four distinct layers. Each is designed for a different use case, and some require Shopify Plus while others are available on all plans.
1. Checkout UI Extensions (React + JavaScript)
UI Extensions are used to add visual, interactive components to the checkout. They are written in React, use a Shopify-provided UI component library (Polaris-based) and are placed at specific checkout "extension points".
Popular use cases:
- Custom input fields: VAT ID, tax number, order note, custom message fields
- Promotional banners: dynamic messages like "Free shipping over €100"
- Upsell / cross-sell: product recommendations, last-chance add-ons
- Gift wrap preview: customisable gift note, delivery date selection
- Trust badges: warranty, return policy, certification logos
- Custom delivery instructions: apartment number, floor, special notes
Extension points correspond to specific locations in the checkout: near the order summary, before the payment step, inside delivery options, etc. Each extension point gives access to its own context.
2. Shopify Functions (Rust or JavaScript)
Shopify Functions are server-side business logic that runs during checkout. Separate from the React UI layer, they run in milliseconds on the backend and make critical decisions:
- Discount Functions: complex discount rules (tiered, conditional, bundle-based)
- Cart/Checkout Validation: minimum cart values, product combination restrictions
- Delivery Customization: filter, reorder, rename shipping options
- Payment Customization: show/hide payment methods based on conditions
- Order Routing: determine which warehouse ships an order
They can be written in Rust or JavaScript, compiled to WebAssembly and run at Shopify's edge nodes. Sub-millisecond execution.
3. Checkout App Blocks
App Blocks are UI components that merchants can drag and drop into the checkout from Shopify Admin. A developer writes them once, then merchants place them at whichever extension point they want.
This is especially powerful for third-party apps. For example, a "Trust Badges" app lets a merchant place badges anywhere on the checkout.
4. Branding API
The Branding API lets you define the checkout's visual identity (colours, fonts, spacing, corner radius, button styles) through a JSON config file. Managed via code rather than Shopify Admin, with full version control.
Real-World Examples: Checkout Extension Points
Shopify exposes 30+ extension points. The most commonly used ones:
- purchase.checkout.block.render: custom block anywhere
- purchase.checkout.cart-line-item.render-after: extra info after each cart row
- purchase.checkout.delivery-address.render-before: above the delivery address (e.g. VAT input)
- purchase.checkout.shipping-option-list.render-after: after shipping options
- purchase.checkout.payment-method-list.render-before: before payment methods
- purchase.checkout.reductions.render-after: after the discount code field
- purchase.thank-you.block.render: thank-you page
Example: How to Add a VAT ID Input Field
For B2B customers in the EU, adding a VAT ID field to checkout is a common requirement. In old checkout.liquid this was done via liquid + jQuery. In the new system you write a React UI Extension.
The basic workflow:
- Create a new extension with Shopify CLI:
shopify app generate extension - Pick "Checkout UI" as the extension type
- Write a React component — use Shopify's
@shopify/ui-extensions-react/checkoutlibrary - Specify the extension target (e.g.
purchase.checkout.delivery-address.render-after) - Add text input, validation and error handling
- Save the VAT ID to the order metafield via
applyMetafieldChange - Test locally with a Shopify development store
- Deploy:
shopify app deploy - Place the extension into the checkout via Shopify Admin → Settings → Checkout → Customize → Add app
On the backend, once the order is created, you can capture the VAT ID via webhook and send it to your tax/invoicing integrator. We cover the Turkish e-invoicing variant of this integration in our Shopify e-Invoice guide.
Migration Plan from Legacy Checkout.liquid
For Shopify Plus stores still running checkout.liquid customisations, migration is mandatory. A typical migration project takes 4–8 weeks and moves through these phases:
Phase 1: Inventory of Existing Customisations (1 Week)
What does your old checkout.liquid contain? List every liquid snippet, JavaScript block, third-party script and asset. Document the purpose, scope and business value of each customisation.
Phase 2: Mapping to the New Architecture (1 Week)
Map each customisation to its equivalent in the new architecture:
- UI changes → Checkout UI Extensions
- Discount logic → Shopify Functions (Discount)
- Shipping filters → Shopify Functions (Delivery Customization)
- Payment filters → Shopify Functions (Payment Customization)
- Visual branding → Branding API
- Third-party scripts → Pixel API or App Extensions
Phase 3: Development (2–4 Weeks)
Write new extensions with Shopify CLI. Test in a development store. Do code review and QA. Follow Shopify's ESLint rules for each extension.
Phase 4: Staging Deployment and Testing (1 Week)
Deploy to staging, test the checkout end-to-end. Verify all payment methods, shipping scenarios and edge cases. Use Shopify's Checkout Profile feature to A/B test the new checkout.
Phase 5: Production Rollout (1 Week)
Roll out to production gradually — first 10% of traffic, then 50%, then 100%. Monitor conversion rate in Shopify Analytics and roll back if anomalies appear.
Limitations and Things to Watch Out For
Like any new system, Checkout Extensibility has limits. Things to know before starting:
Limitations
- Not all customisations can be ported: some exotic liquid customisations (full template rewrites) require redesign
- Limited extension points: 30+ points exist but not every area of the checkout is open. Shopify is adding more over time
- Shopify Plus required: advanced customisations (custom payment methods, deep branding) are Plus-only
- Rate limits: Shopify Functions have an 11ms execution limit per invocation — heavy computation cannot run on edge
- Third-party integrations: some legacy third-party apps were tied to checkout.liquid — they're likely updated but always verify
Performance Considerations
Even though the new architecture is performance-focused, badly written UI Extensions can still slow down the checkout:
- Each extension is an independent JavaScript bundle — many extensions inflate total bundle size
- External API calls inside extensions must be async and have robust error handling
- Use Shopify's component library, avoid custom CSS where possible
- Optimise React re-renders — use useMemo and useCallback
Checkout Extensibility Migration Checklist
- ✅ Inventory of existing checkout.liquid customisations completed
- ✅ Each customisation mapped to its new-architecture equivalent
- ✅ Shopify CLI installed and development store ready
- ✅ UI Extensions written in React + TypeScript
- ✅ Shopify Functions (Discount, Delivery, Payment) developed
- ✅ Visual identity defined via the Branding API
- ✅ All extensions pass Shopify ESLint rules
- ✅ End-to-end testing in staging (all payment methods, shipping scenarios)
- ✅ Third-party app compatibility verified
- ✅ A/B testing set up via Checkout Profile
- ✅ Gradual production rollout planned (10% → 50% → 100%)
- ✅ Analytics tracking (conversion rate, abandonment) active
- ✅ Rollback plan ready
Critical Warning for Shopify Plus Merchants
If you're still running checkout.liquid, Shopify is no longer actively supporting it. New features won't arrive, security issues won't be patched and Shopify's new checkout features (Shop Pay, One-Page Checkout, Shopify Magic) will not work on the old system.
New Shopify Plus stores set up after 2024 don't even have the checkout.liquid option anymore. For existing merchants, Shopify has published an official migration timeline and documentation. Delaying the migration is only going to hurt your checkout conversion rate.
34Devs Checkout Migration Service
At 34Devs we've completed 20+ Shopify Plus checkout migrations since 2024. In every project we inventoried existing customisations, mapped them to the new architecture, wrote UI Extensions and Shopify Functions, thoroughly tested in staging and shipped to production with zero downtime.
If you're still on checkout.liquid and haven't planned a migration, it's time to act. Reach out to our Shopify Plus agency for a free consultation. In the first 45-minute call we analyse your current checkout, walk through migration feasibility and agree on an estimated timeline.
For Shopify Plus B2B configuration and custom workflows, check our B2B Wholesale Portal guide.
Frequently Asked Questions
Is checkout.liquid still working?
Shopify officially deprecated checkout.liquid in August 2024. Existing setups will keep running for a while, but no new customisations are accepted and Shopify's new checkout features will not appear in the old system. Migration should not be delayed.
What skills do I need to write Checkout UI Extensions?
Basic React and TypeScript are enough. Shopify's @shopify/ui-extensions-react library provides its own components (Polaris-like). You'll also need to learn Shopify CLI and the development-store workflow.
Are Shopify Functions paid?
No. Shopify Functions is a free Shopify feature, though in practice it requires developer resources. Each invocation has an 11ms execution limit and comes with a daily invocation quota.
Will my old checkout.liquid customisations break?
Shopify says the old system will keep running for a while, but new checkout features will not appear there and certain updates may break old customisations. Start planning migration now.
How much does migration cost?
A simple migration (3–5 customisations) lands in the €8,000–€15,000 range. Complex setups (B2B, custom payment flows, multilingual checkout) are €20,000–€40,000. Real pricing depends on the number and complexity of customisations.
Does Checkout Extensibility work on all Shopify plans?
No. Checkout customisation is a Shopify Plus feature. Regular Shopify plans rely on third-party apps to modify checkout, but those apps now use the Checkout Extensibility framework internally.
Are old checkout apps in the Shopify App Store compatible?
Most apps written before 2024 have been updated. Check with the publisher of any app you use — those still depending on checkout.liquid should have been removed or migrated.
What should I use for A/B testing?
Shopify's built-in "Checkout Profile" feature lets you show different checkout variants to different customer segments at the same time. Third-party tools like Google Optimize do not work at the checkout level.
