Shopify Checkout Extensibility: what replaced checkout.liquid

Checkout Extensibility is the set of tools Shopify now provides for customising checkout, and it replaces checkout.liquid entirely. Instead of editing one template file, you customise checkout through five separate pieces: Checkout UI extensions for what the customer sees, Shopify Functions for business logic, the checkout and accounts editor for branding, web pixels for tracking, and extensions for the pages that follow payment.

If your store still relies on customisations built the old way, each one needs to be rebuilt in one of those pieces, replaced by an app, or dropped.

What checkout.liquid was

checkout.liquid was a theme file available to Shopify Plus stores. It gave developers direct access to the checkout’s markup, so they could add HTML, restyle the page with CSS and run any JavaScript they liked. Stores used it for delivery date pickers, gift messages, upsells, address validation and a long tail of tracking scripts.

That freedom was also the problem. Shopify deprecated the file for three reasons:

• Upgrade safety. A customised template was a snapshot of the checkout at the time it was edited. When Shopify improved checkout, stores with their own template had to update it by hand to receive the change, and many never did.
• Performance. Scripts injected into checkout run on the page where speed matters most. A slow third-party tag could delay the pay button.
• Security. Arbitrary JavaScript on a page that handles personal and payment details is a risk, both from the scripts themselves and from whatever they load.

The retirement has been staged, starting with the information, shipping and payment steps and followed by the thank-you and order status pages, with the script fields that sat alongside them. The deadlines have either passed or depend on your plan, so check the notices in your Shopify admin and Shopify’s current documentation for where your store stands.

The pieces of Checkout Extensibility

Checkout UI extensions

A Checkout UI extension adds interface elements to checkout: a custom field, a banner, a delivery instruction, a product offer. Extensions are delivered inside an app, either one from the Shopify App Store or a custom app written for your store.

They are built from Shopify’s own set of components, such as text fields, checkboxes, banners and buttons, and they appear at defined positions in the checkout that Shopify calls targets. The merchant then places and configures them in the checkout editor without touching code. The extension code runs in an isolated sandbox. It reads and updates checkout through Shopify’s APIs and has no access to the page’s DOM.

Shopify Functions

Functions hold logic rather than interface. They are small programs that run on Shopify’s infrastructure, not in the browser, and they change how Shopify itself behaves at specific points. The main types cover:

• Discounts: custom rules for product, order and shipping discounts
• Delivery customisation: renaming, reordering or hiding delivery options
• Payment customisation: renaming, reordering or hiding payment methods
• Cart and checkout validation: blocking progress when a rule is broken, such as a quantity limit or an address you do not ship to

Functions are also the replacement for Shopify Scripts, the older Plus feature that handled similar rules. Because a Function runs on the server, its result applies wherever the customer checks out, including accelerated checkouts, and a customer cannot bypass it by tampering with the page.

Functions run within strict limits on execution time and size, so the data they depend on usually needs to be on the cart, customer or product already, often as metafields.

The checkout and accounts editor

Branding is handled in the checkout and accounts editor, a visual editor in the Shopify admin. It sets the logo, colours, fonts and similar settings, and it is where apps’ extensions are added to the layout. For finer control, the Checkout Branding API exposes more detailed design settings, such as corner radius, spacing and the styling of individual component types.

What you set is a design system, not a stylesheet. You choose values and Shopify applies them consistently. You cannot write CSS selectors against the checkout.

Web pixels

Tracking moves from injected script tags to web pixels, managed under Customer events in the admin. A pixel subscribes to standard events that Shopify publishes, such as a checkout being started or completed, and sends the data on to your analytics or advertising platform.

There are two kinds. App pixels are installed by an app, which is how most major marketing platforms now connect. Custom pixels are snippets of JavaScript you add yourself for anything without an app. Both run in a sandbox, separate from the checkout page, and both work with Shopify’s customer privacy and consent settings.

Post-purchase, thank-you and order status pages

The pages after payment have their own extension points. A post-purchase extension can show an offer between payment and the thank-you page, typically an upsell the customer can add to the order they have just placed. The thank-you and order status pages take UI extensions in the same way as the rest of checkout, for things like surveys, delivery information or a reorder prompt. These replace the old additional scripts box, which many stores used for both content and conversion tracking.

What you lose and what you gain

You give up freedom in exchange for stability. You can no longer manipulate the DOM, inject arbitrary scripts or restyle checkout with your own CSS. A customisation that worked by finding an element on the page and changing it has no direct equivalent. If Shopify does not provide a target, a component or a Function type for what you want, it cannot be done inside checkout, and the design needs to change.

In return, customisations built on the new model are upgrade safe: Shopify can improve checkout and your extensions keep working. They work with Shop Pay, which checkout.liquid customisations did not reach. Checkout loads faster without a queue of third-party scripts.

What needs Shopify Plus

Plan requirements are the detail most likely to change, so treat this section as a starting point. At the time of writing:

• Checkout UI extensions on the information, shipping and payment steps have been a Shopify Plus feature.
• Extensions on the thank-you and order status pages have been available more widely.
• Apps from the Shopify App Store that contain Functions can be used on other plans, while custom apps containing Functions have required Plus.
• Basic branding in the checkout editor is available to all stores, while the more detailed Checkout Branding API settings have been a Plus feature.
• Web pixels are available on all plans.

Confirm each of these in Shopify’s documentation before you base a plan or an upgrade decision on it. If you are weighing up the upgrade, our Shopify Plus page sets out what the plan adds beyond checkout.

How to plan the migration

1. Inventory everything. Go through checkout.liquid, the additional scripts field, any Shopify Scripts and every app that touches checkout. List each customisation and each tracking tag separately, with a note on what it is for and who asked for it.
2. Decide the destination for each item. For every line, choose one: a UI extension, a Function, a branding setting, a pixel, an existing app, or drop it. Expect to drop some.
3. Check for an app first. Common needs such as delivery date selection, gift options and upsells are covered by established apps. A custom app makes sense where the logic is specific to your business.
4. Rebuild in a safe place. Shopify lets you build and preview the new checkout as a draft while the live one carries on, so the work can be done without disturbing sales.
5. Test with real scenarios. Place test orders covering each payment method, discount type, delivery option and market. Check Shop Pay and other accelerated checkouts as well as the standard flow.
6. Verify tracking separately. Compare the orders and revenue reported by each analytics and advertising platform with the orders in Shopify. A sandboxed pixel does not behave exactly like a script on the page, and tools that depended on reading the page may need a different setup.
7. Publish, then watch. Monitor conversion rate, payment method mix and reported conversions for the first few weeks.

In our experience the tracking is where surprises turn up. Visible customisations are easy to list. Tags are easy to forget, and a missing one shows up later as an unexplained fall in reported conversions.

What to do next

Open your Shopify admin and look at what is in your checkout today: the checkout settings, the Customer events page and the list of installed apps. Write the inventory described above, even if it is a rough one. It turns a vague worry into a list of specific jobs.

Then read Shopify’s current notices for your plan, so you know which deadlines apply to you and which have already passed. With the inventory and the dates in hand, you can decide what to rebuild, what to replace with an app and what to retire.