Shopify Checkout UI Extensions vs checkout.liquid - What Changed and What You Need to Know

If you've been running a Shopify store for a few years, you probably remember editing checkout.liquid to customize how your checkout looked. Maybe you added a custom banner, a trust badge, or a special upsell block.

That era is over.

Shopify has officially deprecated checkout.liquid and replaced it with Shopify Checkout UI Extensions - a completely new way to build and customize the checkout experience. If you're still on the old system, or just trying to understand what changed and why it matters, this article breaks it all down in plain language.

What Was checkout.liquid?

checkout.liquid was a Liquid template file that gave Shopify Plus merchants direct access to the HTML and CSS of the checkout page. It worked like any other Liquid theme file: you could inject custom code, add scripts, move elements around, and style the checkout however you wanted.

What merchants used it for

• Adding custom fields (gift messages, delivery instructions)
• Injecting third-party scripts (tracking pixels, live chat widgets)
• Custom branding beyond what Shopify's native settings allowed
• Showing trust badges, reviews, or promotional banners
• Upsell blocks before the customer clicked "Pay"
• Custom header and footer replacements

The problem with checkout.liquid

It worked, but it came with serious baggage:

• It was Shopify Plus only. Standard plan merchants never had access to it. This created a two-tier system where only enterprise merchants could fully brand their checkout.
• It broke constantly. Every time Shopify updated the checkout infrastructure for security patches, performance improvements, or new features custom checkout.liquid code would break. Merchants had to re-test and fix their customizations after every platform update.
• It was a security risk. Because merchants had direct HTML access, malicious or poorly written scripts could expose customer payment data or cause PCI compliance issues. Shopify had no way to sandbox or validate the code being injected.
• It didn't work across all checkout surfaces. The Shop app, accelerated checkouts like Shop Pay, and one-page checkout weren't always compatible with checkout.liquid customizations.

What Are Shopify Checkout UI Extensions?

Shopify Checkout UI Extensions are a modern, component-based system for customizing the checkout experience. Instead of editing raw HTML and CSS, you build small UI components using Shopify's React-based extension framework and drop them into pre-defined locations on the checkout page.

Think of it like this: Shopify gives you a set of official "slots" on the checkout page where you can insert your custom content. You build what goes inside those slots using JavaScript and Shopify's UI component library. Shopify controls everything else.

Checkout UI Extensions were released as part of Shopify's broader Extensibility Platform, which also includes Functions, Web Pixels, and the Admin UI Extensions. They are available on all Shopify plans, not just Plus.

The Key Differences: checkout.liquid vs Shopify Checkout UI Extensions

1. Access and availability

This is arguably the biggest shift. With checkout.liquid, you had total control but carried all the risk. With Checkout UI Extensions, Shopify manages the layout and you customize within approved zones.

2. How customization works

With checkout.liquid, you edited a file. With Checkout UI Extensions, you build an app or use an app from the Shopify App Store that adds extensions to your checkout.

Extensions are written in JavaScript/TypeScript using Shopify's UI Components library things like Button, Text, Banner, Image, BlockStack, InlineLayout, and more. These components automatically match your store's branding (fonts, colors, border radius) because they inherit from your checkout's design tokens.

You deploy extensions through the Shopify CLI and they appear in the checkout editor inside your Shopify admin.

3. Where content can appear

With checkout.liquid, you could technically inject content anywhere on the page. With Checkout UI Extensions, you can only add content to specific extension targets named locations that Shopify has designated as safe for customization.

Common extension targets include:

• purchase.checkout.block.render - a flexible block that can appear in several zones
• purchase.checkout.cart-line-item.render-after - after each cart line item
• purchase.checkout.contact.render-after - below the contact/email field
• purchase.checkout.shipping-option-item.render-after - after each shipping option
• purchase.checkout.payment-method-list.render-after - below payment methods
• purchase.checkout.actions.render-before - above the "Pay now" button
• purchase.thank-you.block.render - on the thank-you/order confirmation page
• purchase.order-status.block.render - on the order status page

Each target is a defined zone. You can place one or more extensions in these zones, and merchants can rearrange them using the visual checkout editor.

4. The visual checkout editor

One of the biggest workflow improvements is the checkout editor - a drag-and-drop interface inside Shopify admin (Online Store → Checkout). It works similarly to the Theme Editor for your storefront.

Merchants and developers can:

• Preview the checkout live
• Drag extension blocks between sections
• Configure extension settings through a sidebar (without touching code)
• See changes before publishing

This didn't exist with checkout.liquid. Editing that file required code changes, a reload, and manually verifying across different states (cart, shipping, payment, confirmation).

5. Stability and maintenance

This is where the practical difference is enormous.

With checkout.liquid, when Shopify changed anything about checkout and they do this regularly your customizations could break silently. You'd only notice when a customer complained or you happened to test it.

With Checkout UI Extensions, Shopify maintains the checkout layout and only renders your extension inside its designated slot. If Shopify updates the surrounding UI, your extension still renders correctly because it's isolated. Shopify also versions the Extensions API, so breaking changes are managed with proper deprecation timelines.

6. Performance

Checkout UI Extensions are loaded asynchronously and sandboxed. They can't block the checkout from rendering. This is a significant improvement because poorly written checkout.liquid scripts could slow down the checkout, increasing cart abandonment.

Shopify also optimizes the delivery of extension bundles, so the performance impact of adding extensions is minimal compared to injecting arbitrary third-party scripts via checkout.liquid.

What checkout.liquid Could Do That Extensions Currently Cannot

It's important to be honest here - the migration isn't without trade-offs.

Full layout control
With checkout.liquid, you could completely restructure the checkout layout, move the order summary, replace the header entirely, and change the step flow visually. Checkout UI Extensions don't allow this. You work within Shopify's layout.

Arbitrary JavaScript execution
You could load any third-party script in checkout.liquid - analytics, surveys, live chat, custom validation logic. With extensions, JavaScript runs in a sandboxed environment with limited APIs. You cannot load arbitrary external scripts directly inside an extension.

For tracking specifically, Shopify has introduced Web Pixels (through the Customer Events API) as the proper way to fire analytics and marketing pixels from the checkout including the thank-you page. This is what Stape's Shopify app uses when it injects dataLayer events.

Custom checkout fields stored natively
In checkout.liquid, you could add a custom input field and store the value using Shopify's note_attributes or cart attributes. With Checkout UI Extensions, you can add fields and store values using metafields on the order which is actually more structured and powerful, but requires understanding the new data model.

Full CSS control
You could write any CSS in checkout.liquid. With extensions, you use Shopify's UI Components which apply your store's branding automatically. You can pass style props to components, but you cannot write arbitrary CSS rules.

The Deprecation Timeline

Shopify announced the deprecation of checkout.liquid in 2023. Here's how the timeline played out:

• August 2024: Checkout.liquid was deprecated for the information, shipping, and payment pages. New customizations could no longer be made using checkout.liquid for these steps.
• August 2025: Full sunset. All Shopify Plus merchants were migrated off checkout.liquid. Custom code in the file stopped being rendered.

If you're reading this after August 2025, checkout.liquid is no longer active. Any customizations you had there need to be rebuilt as Checkout UI Extensions or as Web Pixels for tracking purposes.

How to Migrate from checkout.liquid to Checkout UI Extensions

If you had customizations in checkout.liquid, here's how to approach migrating them:

Step 1: Audit what you had
Go through your old checkout.liquid and list every customization: Custom fields, Branding elements, Trust badges or banners, Upsell or cross-sell blocks, Scripts (tracking pixels, analytics), Custom validation.

Step 2: Categorize each customization

• Custom branding, fonts, colors -> Checkout editor no code needed
• Trust badges, text banners -> Checkout UI Extension or App Store app
• Upsell / cross-sell blocks -> App Store apps
• Gift message / custom fields -> Checkout UI Extension with metafield storage
• Tracking pixels (GA4, Meta, etc.) -> Web Pixels / Customer Events
• Live chat widgets -> Checkout-compatible app extensions

Step 3: Check the App Store first
For many common use cases, there are already Checkout UI Extension apps available in the Shopify App Store. Before building a custom extension, search for what you need.

Step 4: Build custom extensions for unique needs
If your customization is unique to your business, you'll need to build a Checkout UI Extension using the Shopify CLI.

Step 5: Move tracking to Web Pixels
All your tracking pixels need to move into the Customer Events system.

Shopify Checkout UI Extensions and Tracking - What You Need to Know

The checkout.liquid file was where many merchants had their GTM snippet injected. Now that it's gone, the checkout and thank-you pages need a different approach.

The correct approach is:

1. Stape's Shopify app (or Shopify's native Customer Events) pushes purchase, begin_checkout, and other ecommerce events from the checkout as a Customer Pixel
2. Your browser GTM container receives these events via the dataLayer
3. Your SGTM server container receives the forwarded GA4 hits and sends data to GA4, Meta CAPI, Google Ads, and other platforms server-side

The Checkout UI Extensions themselves are not the right place for tracking logic. Web Pixels are sandboxed from extensions and run independently.

Common Questions

Can I use Checkout UI Extensions without Shopify Plus?
Yes. This is one of the biggest improvements over checkout.liquid. Extensions are available on all plans.

Do I need to know React to build extensions?
You need to be comfortable with JavaScript and the basics of component-based thinking. Shopify's extension framework uses React-like syntax.

Can I still customize the checkout.liquid on my store?
No. As of August 2025, checkout.liquid is fully deprecated and no longer rendered.

Where do I manage extensions after installing them?
Shopify Admin → Online Store → Checkout. This opens the visual checkout editor.

Final Thoughts

The shift from checkout.liquid to Shopify Checkout UI Extensions is one of the most significant platform changes Shopify has made in years. It's frustrating for merchants who had heavily customized checkouts, but the long-term benefits are real better stability, broader access across all plans, improved performance, and a visual editing interface that doesn't require a developer for every change.