ShieldThemes Web Development
+1 (415) 555-0142 Get a quote →
← Journal/Shopify

Moving from checkout.liquid to Checkout Extensibility

What breaks, what gets better and how we sequence the upgrade so revenue never dips during the switch.

Sofia Lindqvist
Sofia Lindqvist
Shopify Practice Lead · Jan 14, 2025 · 5 min read
Moving from checkout.liquid to Checkout Extensibility

For years, Shopify Plus merchants customized checkout by editing checkout.liquid directly: injecting scripts, rearranging fields and bolting on upsells with jQuery. Shopify has been retiring that file in stages, and the replacement, Checkout Extensibility, works in a fundamentally different way. Instead of editing a template, you compose checkout from sandboxed UI extensions, Shopify Functions, a branding API and pixels that run in isolation. The upgrade is not optional, and it is not a copy-paste job. Here is how we approach it for clients so the switch happens on a quiet Tuesday rather than during a sale.

Start with an honest audit of the old checkout

Most checkout.liquid files we open have been edited by three or four agencies over five years. Before planning anything, we list every customization and ask what it actually does today. On a recent audit, a fashion retailer's checkout contained 23 distinct modifications. Six were dead code for apps long since uninstalled. Four duplicated features Shopify now provides natively. The rest fell into a handful of predictable buckets.

  • Tracking scripts for analytics and ad platforms, which move to the Web Pixels API or a customer events custom pixel.
  • Visual changes such as fonts, colors and logo placement, which move to the checkout branding settings and API.
  • Extra fields and content like gift messages, delivery instructions and trust badges, which become checkout UI extensions.
  • Business logic such as custom discounts, shipping rules and payment method hiding, which become Shopify Functions.
  • Things that are no longer allowed, typically arbitrary DOM manipulation and third-party scripts reading form fields.

That last bucket needs a conversation, not code. If a customization depends on reading the credit card form or rewriting the page layout, it will not survive, and the business needs to decide whether it matters.

Understand the new model before designing anything

Checkout UI extensions are small React or JavaScript components that render into fixed extension targets, such as below the shipping method list or above the order summary. They use Shopify's own component library, so they inherit the checkout's styling and accessibility, and they cannot touch the DOM directly. That constraint is the point. It is why checkouts built this way keep working through Shopify's upgrades and why Shop Pay and one-page checkout improvements reach you automatically.

The old checkout let you do anything and made you responsible for everything. The new one does less and breaks far less often.

Shopify Functions replace the Ruby-based Scripts many Plus stores relied on. They are compiled to WebAssembly, run on Shopify's infrastructure and must finish within strict time and memory limits. Logic that used to be a sprawling script becomes a focused function with a clear input query and output. For most discount and shipping customizations this is a straightforward port. For very complex tiered pricing, we sometimes split one script into several functions or move part of the logic into cart transforms.

The sequence we follow

  1. Move tracking first. Rebuild pixels in the customer events area and run them in parallel with the old scripts for a week. Compare purchase counts and revenue in each platform before removing anything.
  2. Apply branding. Configure typography, colors, corner radius and header layout through the branding settings. Most brands are surprised how close they get without writing code.
  3. Rebuild extensions on a development store, one per customization, each with its own feature flag through extension settings so the merchant can switch it on in the editor.
  4. Port Scripts to Functions and test them against a matrix of real carts: mixed discounts, subscriptions, international addresses and B2B customers if applicable.
  5. Publish in a quiet window, then watch checkout completion rate hourly for the first two days.

Running pixels in parallel is the step teams most often skip, and it is where most post-upgrade surprises come from. A mismatch of more than 2 to 3 percent between old and new purchase events usually means a consent setting or a missing event mapping, and it is far easier to fix before the old scripts are gone.

Where upgrades go wrong

The failures we are called in to repair follow a pattern. An upsell app was installed that renders its own extension but conflicts with a custom one in the same target. A post-purchase survey stopped firing because it relied on the old thank-you page script tags. A wholesale customer group lost its net terms because the payment customization function was never deployed to production. None of these are exotic. All of them are caught by a test plan that walks through every customer type and every payment method before publishing.

We also recommend removing, not porting, anything that has not demonstrably earned money. A checkout upgrade is a rare chance to delete five years of accumulated experiments. The fastest checkouts we see have two or three extensions at most, and their completion rates tend to be higher for it.

What you gain once it is done

Beyond compliance, the upgrade brings real benefits. Checkout customizations become versioned code in a repository, deployed through the Shopify CLI rather than edited in a browser. Changes can be previewed in the checkout editor before they go live. Shop Pay, accelerated checkouts and new payment methods work without regression testing your custom template. And because extensions are isolated, one broken app can no longer take the whole checkout down with it.

Our Checkout Extensibility projects typically run three to six weeks depending on how much logic lives in Scripts. When the checkout work is part of a larger replatform, it slots into our Shopify Plus builds, and custom functions or extensions that need their own backend are handled by our Shopify app development team.

Get your checkout upgrade scoped

If you are still running a customized checkout.liquid or legacy Scripts, send us a list of what your checkout does today, or just a link to your store. Reach out here and we will return a fixed-price quote and migration plan within 24 hours.

Sofia Lindqvist
WRITTEN BY
Sofia Lindqvist
Sofia runs our Shopify practice, from Online Store 2.0 themes to Plus migrations for fast-growing DTC brands.
All articles by Sofia Lindqvist →
Want this on your project?
Get a fixed-price quote from a senior lead within 24 hours.
Request a quote →

Keep reading

How we shipped a support agent that resolves 62% of tickets
AI · 5 min
How we shipped a support agent that resolves 62% of tickets
What to learn in the two weeks before a website redesign
Design · 5 min
What to learn in the two weeks before a website redesign
Migrating to Shopify Plus without losing a single ranking
Shopify · 5 min
Migrating to Shopify Plus without losing a single ranking