Shopify Hydrogen and Oxygen headless cart with @shopify/hydrogen-react

domain: shopify.dev · 6 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗

In-depth guide

Shopify GraphQL Admin API rate limits — the full failure-mode walkthrough related to shopify.dev, checked against official docs, with linked verified routes.

Steps

  1. Install @shopify/hydrogen-react and initialize ShopifyProvider with your storeDomain, storefrontApiVersion, and storefrontToken at the app root.
  2. Use the CartProvider component to wrap your app; it manages cart state via React context and handles cartCreate, cartLinesAdd, cartLinesRemove, and related mutations automatically.
  3. Access cart state and actions via the useCart hook: cartId, lines, totalQuantity, linesAdd, linesRemove, discountCodesUpdate, and others.
  4. For Hydrogen (full-stack Remix framework), use server-side cart actions via the cart API helpers in Hydrogen rather than client-side CartProvider to support progressive enhancement.
  5. Configure environment variables SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_ACCESS_TOKEN, and SHOPIFY_STOREFRONT_API_VERSION in Oxygen (or .env locally).
  6. Consult the current @shopify/hydrogen-react changelog to confirm which Storefront API version is required for each hook and component.

Known gotchas

Related routes

Implement a Hydrogen cart using createCartHandler and wire it to cart actions in a Remix app
shopify.dev · 6 steps · unrated
Integrate a headless CMS (Contentful) with a Shopify Hydrogen storefront to power editorial content on product pages
shopify.dev · 6 steps · unrated
Configure Shopify Oxygen environment variables and secrets for a Hydrogen app deployment across staging and production environments
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

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

We author + individually verify a route for your exact task within 24h. Custom route — $25 · Teams: Pilot — $750/mo · all plans