Shopify Checkout Extensibility: What You Can Actually Build

checkout.liquid is deprecated. Shopify has replaced it with Checkout Extensibility — a system of UI Extensions, APIs, and branding controls that give you significant customization power while keeping Shopify in control of the checkout security model.

What changed and why

checkout.liquid allowed arbitrary HTML/CSS/JS injection into the checkout. This was flexible but created security risks, performance problems, and compatibility issues with Shopify's checkout upgrades. Checkout Extensibility uses a sandboxed extension model instead.

UI Extensions: what they can render

• →Custom fields (gift messages, PO numbers, order notes)
• →Product upsells and cross-sells
• →Loyalty points display and redemption
• →Shipping date estimates
• →Custom banners and messaging
• →Address validation hints
• →Payment icons and security badges

Extension target placement

Extensions render in specific named slots in the checkout layout. You choose the target, and Shopify handles the rendering:

import { extension, TextField } from "@shopify/ui-extensions-react/checkout";

export default extension(
  "purchase.checkout.delivery-address.render-before",
  (root, { applyAttributeChange }) => {
    root.appendChild(
      root.createComponent(TextField, {
        label: "Purchase Order Number",
        onChange: (value) => applyAttributeChange({
          key: "purchase_order_number",
          value,
          type: "updateAttribute",
        }),
      })
    );
  }
);

Checkout Branding API

The Branding API lets you set colors, typography, corner radius, and spacing across the entire checkout — without touching a single line of Liquid. This replaced the visual customization that checkout.liquid used to handle.

Post-purchase extensions

Post-purchase extensions render after the order is confirmed but before the Thank You page. This is where you add upsell offers, subscription prompts, or data collection — with the customer still in a high-intent moment.