The End of checkout.liquid
For years, Shopify Plus merchants customized their checkout experience by editing checkout.liquid, a Liquid template that gave developers direct access to the checkout HTML and CSS. While powerful, this approach had significant drawbacks. Custom checkout.liquid code frequently broke during Shopify updates, created security vulnerabilities, and prevented merchants from benefiting from Shopify's ongoing checkout optimizations.
In 2023, Shopify is replacing checkout.liquid with Checkout Extensibility, a fundamentally different approach that uses extensions, functions, and APIs to customize the checkout. This transition is not optional. Shopify has announced that checkout.liquid will be fully deprecated, and all Plus merchants must migrate to the new platform.
At StrikingWeb, we have been working with Checkout Extensibility since its early beta and have migrated several stores. This guide covers everything you need to know about the new system and how to build custom checkout experiences that convert.
Understanding the Three Pillars
Checkout Extensibility is built on three core technologies, each serving a different purpose in the checkout customization stack.
Checkout UI Extensions
Checkout UI Extensions allow you to add custom user interface elements to the checkout page. Unlike checkout.liquid, where you had full control over the HTML, UI Extensions work within predefined extension points. Shopify determines where in the checkout flow your extension can appear, and you build the content for that location using Shopify's UI component library.
Extension points include locations before and after the contact information, shipping address, shipping method selection, payment method, and order summary. You can render custom banners, form fields, product upsells, loyalty program information, gift messaging options, and more.
The extensions are built using React and Shopify's checkout UI component library, which provides pre-built components like banners, text blocks, buttons, form fields, and layout containers. These components automatically match the store's checkout branding, ensuring visual consistency.
One of the most significant advantages of UI Extensions is that they run in a sandboxed environment. Your extension code cannot interfere with the core checkout functionality, which means Shopify can continue optimizing the checkout experience without worrying about breaking custom code.
Shopify Functions
While UI Extensions handle the visual layer, Shopify Functions handle the logic layer. Functions allow you to customize the backend behavior of the checkout, including how discounts are calculated, which shipping rates are offered, and which payment methods are available.
There are several function types available:
- Discount Functions: Create custom discount logic that goes beyond Shopify's built-in discount capabilities. You can implement buy-X-get-Y promotions, tiered discounts, bundle pricing, or any custom discount rule your business requires.
- Shipping Functions: Customize which shipping rates are shown and how they are calculated. Hide certain shipping methods based on cart contents, add surcharges for oversized items, or rename shipping options for clarity.
- Payment Functions: Control which payment methods are available based on order value, customer location, product type, or any other criteria. This is particularly useful for B2B merchants who need to offer net terms to certain customers while requiring prepayment from others.
- Cart and Checkout Validation Functions: Enforce business rules at checkout. Prevent orders that violate quantity limits, require certain products to be purchased together, or block checkout if items are out of stock in the customer's region.
Functions are written in Rust or JavaScript and compiled to WebAssembly for execution. They run on Shopify's infrastructure with strict performance requirements, ensuring they do not slow down the checkout process.
The Branding API
The Branding API controls the visual appearance of the checkout without requiring code changes. Through the checkout editor in the Shopify admin or programmatically through the API, you can customize colors, typography, button styles, form field appearance, and the overall layout of the checkout.
The Branding API supports detailed customization including primary and secondary colors, font families and sizes, border radius and widths on form elements, button styles for primary and secondary actions, header and footer customization, and background colors or images for different checkout sections.
This is particularly valuable for brands that need their checkout to feel like a seamless extension of their storefront. A luxury brand, for example, can create a checkout experience that matches the premium aesthetic of their product pages.
Building Your First Checkout UI Extension
Setting up a checkout UI extension requires the Shopify CLI and a Shopify Partners account or development store. The process starts with creating a new app using the CLI, then adding a checkout UI extension to that app.
The extension is structured as a React component that uses Shopify's checkout UI components. You define which extension point your component targets, and you can access checkout data through provided hooks and APIs. The component receives context about the current checkout, including cart contents, customer information, and selected shipping and payment methods.
For example, building a gift message extension involves creating a component that renders a text field at the order summary extension point. The component uses the checkout UI TextField component, handles user input, and stores the gift message as a metafield on the order. When the order is placed, the gift message is attached and available in the admin, fulfillment workflows, and order confirmation emails.
Practical Use Cases We Have Built
Here are some of the checkout customizations we have implemented for our clients using the Extensibility platform:
Post-purchase upsells: After the customer completes payment but before the thank-you page, we display a one-click upsell offer for complementary products. This has generated a 12 to 18 percent attachment rate for several stores.
Custom delivery date selection: For a food delivery client, we built an extension that shows available delivery dates based on the customer's postal code and current order queue. The selected date is attached to the order and synced with their fulfillment system.
B2B payment terms: Using payment functions, we hide credit card options and show net-30 and net-60 payment terms for approved wholesale customers, while retail customers see the standard payment options.
Address validation: A validation function that checks shipping addresses against a postal service API and flags potentially invalid addresses before the customer places their order, reducing failed deliveries significantly.
Migration Strategy
If your store currently uses checkout.liquid customizations, here is the migration approach we recommend:
First, audit your existing checkout.liquid modifications. Document every customization, its purpose, and its business impact. Categorize each one as a UI change (handled by UI Extensions), a logic change (handled by Functions), or a visual change (handled by the Branding API).
Second, prioritize based on business impact. Some customizations may no longer be necessary because Shopify's default checkout now handles them natively. Others may need creative re-implementation because the extension point architecture does not support the exact same approach.
Third, build and test incrementally. Start with the highest-impact customizations, deploy them to a development store, and test thoroughly before migrating the next set. Checkout is the most critical part of your store, and any issues directly impact revenue.
Fourth, run both systems in parallel if possible. Shopify allows you to test Checkout Extensibility on development stores while your production store continues using checkout.liquid. Use this period to validate that conversion rates and average order values remain stable.
Performance Considerations
Checkout performance directly impacts conversion rates. Every millisecond of additional load time can cost revenue. When building extensions and functions, keep these guidelines in mind:
Minimize API calls from UI extensions. Each external network request adds latency. Cache data aggressively and batch requests when possible. Functions have strict execution time limits, typically 5 milliseconds, which forces efficient implementations. Use the metafield API to pre-compute and store data that extensions need, rather than computing it at render time. Test on slow network connections and low-powered devices, not just your development machine.
Shopify's Checkout Extensibility platform represents a significant improvement in how developers customize the e-commerce checkout experience. While it requires learning new tools and approaches, the result is a more maintainable, performant, and future-proof checkout that continues to benefit from Shopify's ongoing optimizations.