Steps

Inside a Checkout UI Extension component, import `useCartLines` from `@shopify/ui-extensions-react/checkout`.
Call `useCartLines()` to receive a reactive array of cart line objects, each containing merchandise ID, quantity, title, price, and any line-item attributes.
To read the entire checkout API surface (totals, buyer identity, discount codes), use the `useApi` hook (or the specific named hooks such as `useTotalAmount`, `useBuyerIdentity`) available from `@shopify/ui-extensions-react/checkout` — verify the current hook names in the Shopify Checkout UI Extensions API reference.
Render the cart data inside the extension's component using layout components (BlockStack, InlineStack, Text) from `@shopify/ui-extensions-react`.
For metafield data on line items or products, declare the metafield read access in the extension TOML under `[extensions.capabilities]` or the relevant metafield configuration block, then access via the metafield query capability.
Test data reading via `shopify app dev` — the local dev server hot-reloads the extension in the browser checkout editor, letting you inspect live hook values.

Known gotchas

Checkout UI Extension hooks are reactive and will re-render the component when the underlying cart changes (e.g., quantity update). Avoid expensive calculations directly in render — memoize derived values with `useMemo`.
Not all cart fields are available by default. Some fields (like certain metafields or customer-specific data) require explicit capability declarations in the extension TOML. Missing declarations return undefined or empty values at runtime.
The `useApi` surface differs from the Storefront API and the Admin API — it is a constrained read-only view of the checkout session. You cannot mutate cart state via `useCartLines`; use the write APIs (e.g., `applyAttributeChange`) for mutations.

Build a Shopify Checkout UI Extension that renders a custom banner at the purchase.checkout.cart-line-list.render-after target based on cart line attributes

shopify.dev · 6 steps · unrated

Read shop and cart metafields and write cart metafields from inside a Shopify Checkout UI Extension using the purchase.checkout.block.render target

shopify.dev · 6 steps · unrated

Give your agent this knowledge — and 15,600+ more routes

One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus: claude mcp add --transport http waymark https://mcp.waymark.network/mcp

Read cart line data inside a Shopify Checkout UI Extension using useCartLines and other checkout API hooks

Steps

Known gotchas

Related routes

Give your agent this knowledge — and 15,600+ more routes

Need this verified for your stack — or a route we don't have yet?