Generate a Checkout UI Extension via the Shopify CLI; the CLI scaffolds a React component with the `@shopify/ui-extensions-react` package.
In the extension's `shopify.extension.toml`, declare the target as `purchase.checkout.block.render` under `[[extensions.targeting]]`.
Use the `reactExtension` export (or `extension` for non-React) with the target string to register your component as the render entry point.
Access checkout APIs inside the component using hooks from `@shopify/ui-extensions-react/checkout` — for example, `useExtensionApi` or the specific resource hooks — to read cart and buyer state.
Place UI components from the `@shopify/ui-extensions-react` component library (Banner, Text, Button, BlockStack, etc.) — custom HTML and CSS are not permitted; all rendering goes through the component library.
Deploy the extension via `shopify app deploy` and then activate and position it in the checkout editor within the Shopify admin (or via Admin GraphQL) on the target merchant store.
Known gotchas
The `purchase.checkout.block.render` target requires a merchant to manually place the block in the checkout editor. Static targets like `purchase.checkout.contact.render-after` render automatically without merchant placement, but are more constrained in position.
Checkout UI Extensions run in a sandboxed iframe with a strict content security policy — no arbitrary script imports, no external fonts, and no access to the parent page DOM. All capabilities come through the official extension API.
Extension rendering is synchronous from the buyer's perspective; avoid long-running async operations in the render path. Use `useEffect` patterns for secondary data loading and show a loading state.
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp