Customizing Shopify Checkout: Checkout Extensibility After checkout.liquid

Checkout is the most important and the most locked-down page on a Shopify store, and the rules for customizing it have changed. For years, Plus merchants edited a file called checkout.liquid to add fields, messaging, and tweaks. Shopify has deprecated that approach in favor of Checkout Extensibility, a safer, upgrade-proof model, and merchants who relied on checkout.liquid have to migrate. If you have custom checkout behavior or want some, this is the path now.

The upside is real: the new model is more stable, survives Shopify's updates, works with Shop Pay, and is built from proper components instead of fragile theme edits. This guide explains how Checkout Extensibility works and how to add real customizations with it. It assumes some comfort with React and the command line.

Checkout Extensibility is made of a few coordinated pieces. Checkout UI extensions let you add interface elements at defined spots in checkout, a custom field, a banner, an upsell, a gift message. The branding API controls colors, fonts, and styling so checkout matches your store. And Shopify Functions (covered in the related guide) handle the logic, validating the cart or customizing delivery and payment options. Together they replace what checkout.liquid used to do, but in a way Shopify can keep updating without breaking your store.

A UI extension is a small app extension, often written in React, that renders at a specific target in checkout. Here is a banner that appears in the checkout block.

import { reactExtension, Banner } from "@shopify/ui-extensions-react/checkout";

// render at a defined checkout target
export default reactExtension("purchase.checkout.block.render", () => <Promo />);

function Promo() {
  return <Banner title="Add $50 to unlock free shipping" status="info" />;
}

You build and deploy it with the Shopify CLI, the same workflow as any app extension.

shopify app generate extension --type=checkout_ui
shopify app deploy

Then you place the extension in the checkout editor at the target you chose. Because it renders through Shopify's components at a supported spot, it keeps working through platform updates rather than breaking the next time checkout changes.

A common need is collecting something extra, a gift message, a delivery note, a tax id, and saving it on the order. UI extensions provide fields and an API to read what the customer enters and attach it to the checkout, so it flows through to the order for your team or your fulfillment process. Instead of hacking an input into a Liquid file, you use a real field component and the checkout's storage, which is both cleaner and durable.

Two other pieces round out a serious checkout customization. Branding lets you bring checkout in line with your store's look, colors, corner radius, fonts, through the branding API rather than CSS overrides, so it stays on-brand and on-spec. And validation, blocking checkout when the cart breaks a rule, is handled by a cart and checkout validation Function, which can stop an order that violates your business logic. UI extensions present, Functions decide, branding styles, each does one job well.

The hard part of this transition is that checkout.liquid customizations and many old checkout hacks simply stop working, so a migration is not optional for affected stores. The move is to inventory what your old checkout did, every field, message, script, and rebuild each piece with the right tool: a UI extension for interface elements, a Function for logic, branding for styling. Some bespoke tricks will not have a direct equivalent and need rethinking within the supported model, which is usually a good thing, because the result is stable instead of fragile. Treat it as a project with a checklist, not a quick swap.

• Inventory every existing checkout customization (fields, messages, scripts, styling).
• Add interface elements as Checkout UI extensions at supported targets.
• Capture custom inputs with field components and attach them to the order.
• Apply your look through the branding API, not CSS hacks.
• Enforce cart rules with a checkout validation Function.
• Build and deploy with the Shopify CLI, and place extensions in the checkout editor.
• Confirm everything works with Shop Pay and survives platform updates.

Is checkout.liquid really going away?

Yes. Shopify has deprecated checkout.liquid in favor of Checkout Extensibility, so customizations built on it stop working and must be rebuilt with the new model. This affects Plus merchants who edited checkout directly. The replacement, Checkout UI extensions, the branding API, and Functions, is more stable and upgrade-safe, but the migration is required rather than optional, so it is worth planning as a real project before the deadline forces it.

How do I add a custom field to Shopify checkout now?

With a Checkout UI extension. You render a field component at a supported checkout target using the extensions framework, read what the customer enters through the checkout API, and attach it to the order so it reaches your team or fulfillment. This replaces the old approach of editing checkout.liquid, and because it uses Shopify's components at a defined spot, the field keeps working through future checkout updates.

Do I need Shopify Plus for Checkout Extensibility?

Checkout UI extensions and related customization are primarily a Shopify Plus capability, since deep checkout control has long been a Plus feature. Some elements are more broadly available, but full checkout customization through extensions is generally tied to Plus. If you are on Plus and were using checkout.liquid, this is your migration path, and if you are not, the standard checkout settings plus apps cover most needs.

What is the difference between a UI extension and a Function in checkout?

They do different jobs and often work together. A Checkout UI extension renders interface elements, fields, banners, upsells, at defined spots in checkout. A Function runs logic, validating the cart or customizing discounts, delivery, and payment options, with no interface. Think of it as UI extensions presenting things to the customer and Functions making decisions behind the scenes, with branding controlling how it all looks.

Will checkout customizations break when Shopify updates?

That is exactly the problem Checkout Extensibility solves. The old checkout.liquid edits were fragile and could break on platform changes, whereas extensions render through Shopify's supported components at defined targets, so they are designed to survive updates. It is not a guarantee to ignore forever, but moving customizations into the supported model is what makes them stable, which is the main reason Shopify pushed the transition.

If checkout.liquid is going away and you need to keep or add custom checkout behavior, tell me what your checkout has to do and I will map out the migration to Checkout Extensibility.