Shopify Checkout Extensibility: Build Custom UI Extensions in 2026

By Eoin Villarin, 2026-02-05, updated 2026-10-28

Shopify's checkout.liquid and Scripts are gone. Learn how to build checkout UI extensions with Preact and Polaris web components, test them and avoid common mistakes.

Shopify checkout extensibility is now the only way to customise Shopify's checkout, and 2026 closed the last gaps. Shopify Scripts stopped running on June 30, 2026, and non-Plus stores had until August 26, 2026 to upgrade their Thank you and Order status pages. If your store still relied on old Liquid edits or pasted scripts, some of them have already stopped working.

The good news is that the replacement is more stable than what came before. Checkout UI extensions run in a sandbox, survive Shopify's own upgrades and now use Preact with Polaris web components, which keeps bundles small and checkout fast.

This guide covers what changed, which parts of checkout you can customise on each plan, how to build and test an extension step by step, and the mistakes I see most often when reviewing extension code for Shopify stores.

What is Shopify checkout extensibility and why did checkout.liquid go away?

For years, Shopify Plus merchants customised checkout by editing checkout.liquid directly. That gave total control, but every Shopify update risked breaking custom code, and injected scripts could slow down or compromise the most sensitive page on the store.

Checkout extensibility replaces that with defined extension points. Apps render UI in specific targets, business logic runs in Shopify Functions, and tracking moves to web pixels. Shopify can then ship security patches, new payment methods and performance improvements without touching your customisations.

Key checkout deprecation dates

Sources: the Shopify Help Center checkout upgrade guide and the Shopify Scripts deprecation notice. If you still had tracking code on those pages, read my guide to migrating tracking pixels after the script tag deprecation.

Which parts of Shopify checkout can you customise?

Checkout UI extensions render into targets, and Shopify groups those targets into three kinds. Knowing which kind you need decides how merchants will place and configure your extension.

• Block targets such as purchase.checkout.block.render and purchase.thank-you.block.render, which merchants position anywhere supported using the checkout editor.
• Static targets that render at fixed points, for example after the contact fields, before the action buttons or after the cart line items.
• Runnable targets that provide data or logic without rendering any UI.

What each Shopify plan can do

Extensions on the Information, Shipping and Payment steps are available only to stores on Shopify Plus. Thank you and Order status page extensions are available on every plan, which is why the August 2026 upgrade mattered so much for smaller stores that had relied on additional scripts.

What merchants usually ask me to build

• Gift message and gift wrap options saved as cart attributes or metafields.
• Delivery date or time slot pickers for local delivery.
• Loyalty point balances and redemption widgets.
• Post-purchase surveys and upsell offers on the Thank you page.
• Trust banners, B2B purchase order fields and custom validation messages.

What changed in 2025-10: Preact and Polaris web components

From API version 2025-10, Shopify recommends Preact for UI extensions, and new extensions use Polaris web components by default. Components are now custom HTML elements such as <s-stack>, <s-checkbox> and <s-button>, and checkout APIs live on a global shopify object instead of React hooks.

The main reason is size. A compiled checkout UI extension bundle cannot exceed 64 KB, and Preact's small runtime leaves far more of that budget for your own code. Shopify's migration guide to web components maps each legacy component to its replacement. Note that from 2026-04, the metafields property and useMetafield hooks are deprecated in favour of shopify.appMetafields.

How to build a Shopify checkout UI extension step by step

You need a Shopify Partner account, the latest Shopify CLI and a development store. To target the Information, Shipping or Payment steps, the dev store must have Shopify Plus features enabled.

1. Create or open an app. Run shopify app init for a new app, or open your existing app directory.
2. Generate the extension. Run shopify app generate extension --template checkout_ui and give it a clear name.
3. Configure the target. Edit shopify.extension.toml to set the API version and the target where the extension renders.
4. Write the UI. Build the component in Preact using Polaris web components.
5. Run the dev server. shopify app dev connects your local code to a real checkout on your dev store and generates the shopify.d.ts types.

A minimal configuration looks like this:

api_version = "2026-10"

[[extensions]]
name = "Gift wrap option"
handle = "gift-wrap-option"
type = "ui_extension"

  [[extensions.targeting]]
  module = "./src/Checkout.jsx"
  target = "purchase.checkout.block.render"

And here is a gift wrap checkbox that saves a cart attribute the merchant can see on the order:

// src/Checkout.jsx
import '@shopify/ui-extensions/preact';
import { render } from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  async function onCheckboxChange(event) {
    const isChecked = event.target.checked;
    const result = await shopify.applyAttributeChange({
      type: 'updateAttribute',
      key: 'gift_wrap',
      value: isChecked ? 'yes' : 'no',
    });
    if (result.type === 'error') {
      console.error(result.message);
    }
  }

  return (
    <s-stack>
      <s-checkbox
        label="Gift wrap this order"
        onChange={onCheckboxChange}
      />
    </s-stack>
  );
}

Before writing to the cart in production code, check shopify.instructions to confirm the current checkout allows that change. Some checkouts, such as draft order checkouts, restrict certain cart edits, and your extension should degrade gracefully instead of showing an error.

How to test checkout UI extensions before launch

Testing against real cart data is one of the biggest advantages of the new model. While shopify app dev is running, work through this checklist:

• Static targets render automatically in their fixed location.
• Add ?placement-reference=DELIVERY1 (or INFORMATION1, PAYMENT1 and so on) to the checkout URL from the CLI to preview a block extension in a specific placement.
• Open Settings, Checkout, Customize in the admin, add your extension with the Add app block button and drag it between targets.
• Switch between one-page and three-page checkout layouts in the editor settings, because merchants can use either.
• Turn on Shopify Payments test mode to place complete test orders, including Shop Pay.

Shopify CLI 3.70 and later supports source maps, so you can debug the sandboxed code in Chrome DevTools. The testing guide on shopify.dev lists every placement reference for checkout, Thank you and Order status pages.

Deploying extensions and the mistakes that break them

Deploy with shopify app deploy, which creates a new app version. The merchant then installs the app and places the extension in the checkout editor, because an extension does not appear in checkout until someone adds it there. That single step causes a surprising number of "it works on my store" support tickets.

Mistakes I see in extension code reviews

• Treating the extension like a web page. Extensions run in a Web Worker with no access to window or the DOM, so libraries that touch either will fail.
• Blowing the 64 KB budget. Date libraries, icon packs and analytics SDKs add up fast. Import only what you need and check the compiled size on every build.
• Calling external APIs without permission. Add network_access = true under [extensions.capabilities], request network access for the app in the Partner Dashboard and make sure your server returns Access-Control-Allow-Origin: *.
• Trusting the client. Anything the extension sends can be tampered with. Authenticate calls to your backend with a session token from shopify.sessionToken and re-validate prices, discounts and eligibility on the server.
• Blocking checkout carelessly. The block_progress capability lets an extension stop the buyer from continuing. Use it only for genuine validation, and always explain why.

Every extra kilobyte and every failed request in checkout puts a sale at risk. Build extensions as if they were part of the payment flow, because they are.

Where Shopify Functions and web pixels fit in

UI extensions are only one part of Shopify checkout extensibility. Logic that used to live in Shopify Scripts now belongs in Shopify Functions:

• Discount Functions for tiered, bundle and customer-specific discounts.
• Cart and Checkout Validation for rules such as minimum quantities or restricted shipping regions.
• Delivery Customization and Payment Customization to rename, reorder or hide options.
• Cart Transform for bundles and product expansions.

Analytics and conversion tracking move to web pixels, which subscribe to standard checkout events without injecting scripts into the page. Together these pieces keep checkout fast, which matters for every store and is a core part of my Shopify speed optimization checklist. If you also sell through AI assistants, my guide to agentic commerce on Shopify explains how checkout is evolving beyond the storefront.

Frequently asked questions

Can non-Plus stores use checkout UI extensions?

Yes, but only on the Thank you and Order status pages. Extensions on the Information, Shipping and Payment steps require Shopify Plus. Non-Plus merchants can still adjust branding in the checkout editor and install apps that add Thank you page blocks, post-purchase surveys or order tracking widgets without changing their plan.

Do I have to rewrite my React checkout extensions in Preact?

Not immediately. Extensions pinned to API version 2025-07 or earlier keep using React components, and Shopify's migration guide does not list a removal date. However, newer API versions use Polaris web components by default and new features land there first, so plan the migration during your next significant update rather than waiting for a deadline.

What happened to Shopify Scripts?

Shopify Scripts could no longer be edited or published after April 15, 2026, and they stopped executing on June 30, 2026. Line item, shipping and payment scripts must be rebuilt as Shopify Functions, such as discount, delivery customization and payment customization functions, or replaced with public apps that use those same APIs.

How big can a checkout UI extension be?

The compiled bundle for a checkout UI extension cannot exceed 64 KB, while full-page customer account extensions get 128 KB. Preact and Polaris web components help because their runtime is small, but you still need to avoid heavy dependencies such as full date libraries, icon sets or analytics SDKs inside the extension itself.

Next steps for Shopify checkout extensibility

If your store is on Shopify Plus, audit every checkout customisation, map each one to a UI extension, Function or web pixel, and test everything on a dev store before switching. Non-Plus stores should confirm that their Thank you and Order status pages upgraded cleanly and that conversion tracking still fires. For an example of the Shopify Plus work I do, see the Real Mad Honey case study.

Need a custom checkout extension built, or an existing one migrated to Preact? Send me the details through my contact form or browse more of my Shopify and WordPress case studies.