From shopify-pack
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".
npx claudepluginhub flight505/skill-forge --plugin shopify-packThis skill is limited to using the following tools:
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.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Share bugs, ideas, or general feedback.
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.
@shopify/ui-extensions-react package# 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
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 (
<BlockStack spacing="tight">
<Banner status="info">{banner_text || "Free shipping over $50!"}</Banner>
</BlockStack>
);
}
import {
useApplyMetafieldsChange, useTotalAmount, useShippingAddress, TextField,
} from "@shopify/ui-extensions-react/checkout";
function DeliveryNote() {
const applyMetafieldsChange = useApplyMetafieldsChange();
return (
<TextField
label="Delivery instructions"
onChange={(value) => applyMetafieldsChange({
type: "updateMetafield",
namespace: "custom", key: "delivery_note",
valueType: "string", value,
})}
/>
);
}
shopify app build --verbose # Check output size
# Import only what you use — each component adds ~1-3KB
# Avoid lodash, date-fns, zod — use native JS
# Split into multiple extensions if approaching 64KB
See extension-targets.md for all targets, ui-components.md for components, and bundle-optimization.md for size strategies.
| Error | Cause | Solution |
|---|---|---|
EXTENSION_LOAD_FAILED | Bundle exceeds 64KB or invalid code | Tree-shake deps; check size with --verbose |
| Sandbox violation | DOM access, fetch, or window usage | Use only Shopify components and hooks |
CHECKOUT_COMPLETION_BLOCKED | Extension error with block_progress | Add try/catch; test all edge cases |
| Target not rendering | Wrong target or not enabled | Verify target in TOML; check admin placement |
Collect delivery instructions or gift messages by rendering a text input at a specific checkout target and saving the value as a cart metafield.
See Extension Targets for all available targets and placement options.
Create a merchant-configurable promotional banner using Shopify's UI component library with proper accessibility.
See UI Components for available components and their key props.
Your checkout extension is approaching the 64KB limit. Apply tree-shaking, dependency auditing, and extension splitting strategies.
See Bundle Optimization for size measurement and reduction techniques.