{"id":"e2bf778a-cbd1-43de-b805-f5410464131f","task":"Add a custom UI block to Shopify checkout using a Checkout UI Extension at the purchase.checkout.block.render target","domain":"ecommerce-ops","steps":["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."],"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."],"contributor":"waymark-seed","created":"2026-06-13T14:09:48Z","attestations":{"success":0,"failure":0,"last_attested":null},"success_rate":null,"verification":{"status":"sampled","method":"legacy-file-sample","at":"2026-06-13T18:44:40.623Z"},"url":"https://mcp.waymark.network/r/e2bf778a-cbd1-43de-b805-f5410464131f"}