shopify-checkout-extensions

name	shopify-checkout-extensions
description	Build Checkout UI Extensions to customize Shopify checkout with sandboxed React-like components. Use when replacing checkout.liquid (deprecated Aug 2025), adding custom fields to checkout, displaying banners, or reading checkout state with hooks. Trigger with phrases like "shopify checkout extension", "shopify checkout ui", "checkout customization shopify", "checkout.liquid migration", "shopify checkout components".
allowed-tools	Read, Write, Edit, Bash(npm:*), Grep
version	2.7.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","ecommerce","shopify"]
compatibility	Designed for Claude Code

Shopify Checkout UI Extensions

Overview

Checkout UI Extensions replace checkout.liquid (deprecated August 2025) with sandboxed, React-like components at specific checkout targets. They run in isolation with no DOM access and a strict 64KB bundle limit, using Shopify's component library for consistent, accessible UIs.

Prerequisites

• Shopify CLI 3.x+ and a Shopify Partners app
• Node.js 18+, @shopify/ui-extensions-react package
• Development store with checkout extensibility enabled

Instructions

Step 1: Configure the Extension

# extensions/checkout-banner/shopify.extension.toml
api_version = "2025-01"
type = "ui_extension"

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

[extensions.capabilities]
api_access = true
network_access = false

Step 2: Build with UI Components

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

export default reactExtension("purchase.checkout.block.render", () => <CheckoutBanner />);

function CheckoutBanner() {
  const { banner_text } = useSettings();
  return (
    < =>
      {banner_text || "Free shipping over $50!"}
    
  );
}