Run `shopify app generate extension` and select 'Customer Account UI' as the type; choose a supported target such as customer-account.order-index.block.render or customer-account.profile.block.render
In the generated shopify.extension.toml confirm the target name matches the customer account page you want to extend; check current docs for all supported customer-account.* targets
Implement the extension component using @shopify/ui-extensions-react/customer-account hooks; use useApi() to access extension context including the customer's ID and authenticated API access
Fetch loyalty data from your backend using the fetch API inside the extension; the extension runs in a sandboxed iframe so CORS must be configured on your backend to allow requests from *.shopifyapps.com origins
Render UI using the extension's component library (BlockStack, Text, Button, etc.) — do not use arbitrary HTML or external CSS frameworks inside the extension iframe
Deploy with `shopify app deploy` and activate the extension in the Partners dashboard under Customer Account Extensions; test on a development store customer account page
Known gotchas
Customer Account UI extensions run in a sandboxed context; you cannot access the parent page DOM, use arbitrary JavaScript APIs, or load external scripts — work only with the provided extension API
The customer ID available in the extension context is not the same format as the Admin API customer GID; check the extension docs for the ID format and any mapping required to call your own backend
Customer Account UI extensions are separate from Checkout UI extensions — targets, hooks, and components differ; do not mix purchase.checkout.* target strings into a Customer Account extension or vice versa
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