What is Shopify Headless Commerce?
Shopify's theme system (Liquid) is separate from its data layer. The Storefront API — a public GraphQL API — exposes products, collections, inventory, and cart operations to any frontend framework, React included. Shopify manages products, orders, and payments; your React app owns the entire UI.
What Shopify doesn't do
There's no "Enable React" toggle in Shopify Admin, and Liquid themes can't embed React components natively without workarounds. If you're staying inside the default theme editor, you're staying in Liquid. React enters the picture the moment you decouple the frontend entirely — which is what "headless Shopify" means.
What actually connects React to Shopify
The Storefront API. Generate an access token in Shopify Admin (Settings → Apps and sales channels → Develop apps → Configure Storefront API scopes), then query it from React like any other GraphQL API:
const res = await fetch('https://your-store.myshopify.com/api/2025-01/graphql.json', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN!,
},
body: JSON.stringify({
query: `{
products(first: 12) {
edges { node { id title priceRange { minVariantPrice { amount currencyCode } } } }
}
}`,
}),
});
const { data } = await res.json();That's the entire mechanism. No SDK required, though most teams use one — Shopify's own @shopify/storefront-api-client, a bridge layer like Trama, or Hydrogen if you want the framework opinions bundled in.
Three ways to actually do it
| Approach | What it gives you |
|---|---|
| Hydrogen | Shopify's own React framework — templates, caching, cart primitives pre-wired |
| Plain React/Next.js + raw Storefront API | Full control, but you build caching, cart state, and auth yourself |
| Plain React/Next.js + bridge layer | Same flexibility as raw API calls, without hand-wiring the boring 20% |
For the full trade-off between the first two, see Shopify Hydrogen vs Next.js. For the complete picture — architecture, checkout limits, benchmarks — see the full Shopify headless guide.
Frequently asked questions
Does Shopify support React?
Yes. Shopify doesn't render React natively in its own theme system (which uses Liquid), but its Storefront API is a public GraphQL API that any framework — React, Next.js, Astro, SvelteKit — can call directly. This is the standard "headless Shopify" pattern.
Can I use Next.js with Shopify?
Yes, and it's one of the most common setups. Next.js has no special Shopify integration built in — you call the Storefront API from your own data-fetching code, same as any other GraphQL API. Vercel maintains an official Next.js Commerce template pre-wired to Shopify.
Do I need Shopify Hydrogen to use React with Shopify?
No. Hydrogen is Shopify's own opinionated React framework (built on Remix), but it's one option, not a requirement. A plain Create React App, Next.js, or Vite + React project can call the Storefront API just as validly.
What do I need to start using React with Shopify?
A Storefront API access token, generated from Shopify Admin under Settings → Apps and sales channels → Develop apps. That token authenticates read-mostly GraphQL requests for products, collections, and cart from any frontend.
See it work on your store.
Paste your Shopify URL on the homepage. Trama renders your real products through a React frontend in seconds — no token wrangling required.