Rebuilding Checkout Customizations With Checkout UI Extensions

The field guide covered where every old checkout customization lives now. This post is about the biggest destination on that map: checkout UI extensions, the app-based replacement for the things you used to hand-edit into checkout.liquid.

What an extension actually is

A checkout UI extension is a small piece of app code that renders at a point Shopify defines, called a target. Shopify publishes the list of targets: before the payment method list, after the delivery address, after a cart line item, in a merchant-positioned block, and a few dozen more across checkout and the Thank you and Order status pages.

That target system is the whole trade. Your code can only appear at sanctioned points and can only compose Shopify's components, so Shopify can keep upgrading checkout without breaking you. The DOM surgery era's failure mode, where a checkout upgrade silently killed your customization, is gone by construction.

Three other properties worth knowing before you build:

• Components, not markup. You assemble Shopify's checkout components (banners, text fields, checkboxes, headings, images). They inherit the store's checkout styling automatically, so extensions look native without you writing CSS.
• Settings live in the checkout editor. An extension can expose settings (a banner message, a toggle) that the merchant edits without touching code.
• Plan gates by surface. In-checkout targets are Plus only; Thank you and Order status targets work on every plan except Starter.

The greatest hits, rebuilt

The customizations we most often migrated off checkout.liquid, and how each maps to an extension:

• Trust and reassurance content. A banner or text block near the payment list ("Ships in 24h", returns promise, support hours). The simplest possible extension, and often the one with the most measurable effect.
• Delivery instructions or gift message. A text field whose value is written to a cart attribute or note, so it lands on the order for fulfillment to read.
• A terms-agreement checkbox. The extension renders the checkbox and intercepts the buyer journey until it's checked. If the rule must be enforceable no matter what, back it with a cart and checkout validation function so the server says no even when the UI isn't there.
• Conditional warnings. PO box notices when the address looks like one, dispatch-delay notes when a preorder item is in the cart. Extensions read cart contents and the buyer's entries, so the logic runs on live checkout state.
• Post-purchase content. The same component model works on the Thank you and Order status pages on any plan except Starter, which is also where the no-code Checkout Blocks route competes honestly with a custom build.

How a build ships

The shape of the project, so you can scope it or brief whoever builds it:

1. Scaffold with the CLI: shopify app generate extension --template checkout_ui. Extensions live inside an app, same as Functions.
2. Declare the target in the extension's TOML config. The target decides which components and APIs are available to you.
3. Build the UI from checkout components, read state through the extension APIs (cart lines, buyer identity, attributes, metafields), and write through the supported ones.
4. Deploy, then place and configure the block in the checkout editor on a test checkout before going live.

A focused extension like a trust banner or a delivery-instructions field is a small, well-bounded project. The cost center is never the component code; it's agreeing on the rules and testing the edge cases.

When you don't need a custom extension

Same honesty rule as the rest of this series: check the App Store first, because banners, custom fields, and checkout content are well-covered categories now. And if everything you want lives on the Thank you and Order status pages, Checkout Blocks may get you there without any code at all.

If your list is more specific than the apps can handle, that's our wheelhouse. We migrated stores through every wave of the checkout transition, and the Functions Playbook covers the server-side half of most checkout builds.