For years, Shopify Plus developers relied on checkout.liquid to inject custom JavaScript and CSS into the most critical page of an e-commerce store. As of 2025, that approach is dead. In 2026, Checkout Extensibility is the mandatory standard. Here is exactly how to build secure, lightning-fast Checkout UI Extensions using React.

Chapter 1: Why checkout.liquid Had to Die

The old checkout.liquid file was a security nightmare and a performance bottleneck. Because merchants could inject arbitrary JavaScript (like jQuery, tracking pixels, and custom DOM manipulators), the checkout was brittle. If Shopify updated a class name, half the custom checkouts on the internet broke.

Worse, arbitrary JS meant malicious scripts (Magecart attacks) could theoretically scrape credit card numbers if a merchant installed a shady tracking pixel.

Checkout Extensibility fixes this by locking down the DOM. You can no longer write custom CSS or arbitrary JS that touches the checkout fields. Instead, you build isolated components that run in a secure sandbox (Web Workers) and render natively on the client.

Chapter 2: The Architecture of Checkout UI Extensions

Checkout UI Extensions are built using Preact/React. But there is a catch: you cannot use standard HTML tags like <div> or <span>. Because Shopify renders these components natively on mobile (Shop app) and web, you must use their proprietary UI components.

For example, instead of a <div>, you use a <BlockStack>. Instead of an <h1>, you use <Heading>.

import {
  extend,
  Banner,
  BlockStack,
  Text,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const banner = root.createComponent(Banner, {
    status: 'success',
    title: 'Free shipping unlocked!',
  });
  root.appendChild(banner);
});

Chapter 3: Building a Post-Purchase Upsell Component

One of the highest ROI extensions you can build is an in-checkout cross-sell. Let's look at a React-based example of an extension that offers a complementary product right before the payment step.

import {
  reactExtension,
  useCartLines,
  useApplyCartLinesChange,
  BlockStack,
  Button,
  Text,
  InlineLayout,
  Image
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension('Checkout::Actions::RenderBefore', () => <UpsellApp />);

function UpsellApp() {
  const lines = useCartLines();
  const applyCartLinesChange = useApplyCartLinesChange();

  // Simple logic: if they are buying coffee, offer a mug
  const hasCoffee = lines.some(line => line.merchandise.title.includes('Coffee'));
  const hasMug = lines.some(line => line.merchandise.title.includes('Mug'));

  if (!hasCoffee || hasMug) return null;

  return (
    <BlockStack border="base" padding="tight" borderRadius="base">
      <Text size="medium" emphasis="bold">Add a matching mug?</Text>
      <InlineLayout spacing="base" columns={['20%', 'fill', 'auto']}>
        <Image source="https://cdn.shopify.com/mug.jpg" />
        <Text>Ceramic Mug - $15.00</Text>
        <Button onPress={() => {
          applyCartLinesChange({
            type: 'addCartLine',
            merchandiseId: 'gid://shopify/ProductVariant/123456789',
            quantity: 1
          });
        }}>
          Add to Order
        </Button>
      </InlineLayout>
    </BlockStack>
  );
}

This code runs completely securely, inherits the merchant's brand styling automatically, and is blazing fast because it doesn't wait for a heavy DOM to parse.

Chapter 4: Security and Network Calls

What if your extension needs to fetch external data, like a customer's loyalty point balance from Yotpo or a custom database? You can use the standard fetch() API inside your extension.

However, to prevent data leakage, Shopify requires you to explicitly declare network access in your shopify.extension.toml configuration file. If you try to fetch a domain that isn't whitelisted in the TOML file, the request is instantly blocked by the sandbox.

Frequently Asked Questions (FAQ)

Conclusion

Checkout Extensibility might feel restrictive at first compared to the Wild West of checkout.liquid, but it is vastly superior. By standardizing components and enforcing a strict sandbox, Shopify has guaranteed that checkouts will never break during platform updates.