WooCommerce developers who've built custom React or Vue frontends powered by the WooCommerce REST API have a parallel option on Shopify: headless commerce using the Shopify Storefront API and Hydrogen framework. This guide covers the technical architecture for developers evaluating whether to go headless on Shopify after migration.

Headless WooCommerce — the existing pattern

WooCommerce headless setups typically use:

WooCommerce REST API: Products, cart, orders, customers — all via REST
WordPress + WPGraphQL: GraphQL layer over WordPress/WooCommerce data (very popular with Next.js)
CoCart: REST API extension specifically for decoupled cart management (handles sessions without WordPress login)
Frontend: Next.js, Nuxt.js, Gatsby, or custom React SPA
Hosting: Frontend on Vercel/Netlify, WordPress backend on separate server

Shopify headless options

1. Shopify Hydrogen (Remix-based)

Hydrogen is Shopify's official headless React framework, built on Remix. Launched 2022, significantly updated in 2023 with the Remix rebuild.

React + Remix (file-based routing, server-side rendering, streaming)
Built-in Shopify Storefront API data fetching utilities
Shopify-specific components: ProductProvider, CartProvider, ShopPayButton, etc.
Deployed to Oxygen (Shopify's edge hosting) — included in all Shopify plans
Full cart + checkout implementation included in the Hydrogen starter template

Hydrogen is the recommended path for greenfield headless Shopify development.

2. Custom Next.js + Shopify Storefront API

The most common pattern for developers already on Next.js:

Use @shopify/storefront-api-client npm package (official)
GraphQL queries to Storefront API for products, collections, cart, checkout
Deploy on Vercel (standard Next.js deployment)
More flexibility than Hydrogen, less opinionated

3. Third-party headless platforms

Builder.io: Visual CMS + Shopify backend. Drag-and-drop for marketers, Shopify data layer for products.
Nacelle: Commerce-specific headless platform with Shopify sync and pre-built React components.
Contentful/Sanity + Shopify: CMS handles content, Shopify handles commerce — linked by product IDs.

Shopify Storefront API

The Storefront API is the read-only (+ cart mutations) GraphQL API that powers headless storefronts. Unlike the Admin API, it's designed for frontend use — public-facing, accessible from browsers.

// Storefront API access token (public, read-only scope)
const client = createStorefrontApiClient({
  storeDomain: 'your-store.myshopify.com',
  apiVersion: '2024-01',
  publicAccessToken: 'storefront_xxx',
});

// Query products
const { data } = await client.request(`
  query {
    products(first: 10) {
      nodes {
        id title handle
        priceRange { minVariantPrice { amount currencyCode } }
        images(first: 1) { nodes { url altText } }
        variants(first: 100) {
          nodes {
            id title availableForSale
            price { amount }
            selectedOptions { name value }
          }
        }
      }
    }
  }
`);

Cart management in Storefront API

// Create cart
mutation cartCreate($input: CartInput!) {
  cartCreate(input: $input) {
    cart { id checkoutUrl lines { nodes { id quantity } } }
  }
}

// Add to cart
mutation cartLinesAdd($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart { id totalQuantity cost { totalAmount { amount } } }
  }
}

The cart.checkoutUrl redirects to Shopify's hosted checkout — headless storefronts typically use Shopify's checkout (not a custom checkout) to handle PCI compliance. Shopify Plus can customize the checkout extensively.

WPGraphQL + WooCommerce vs Shopify Storefront API

Aspect	WPGraphQL + WooCommerce	Shopify Storefront API
Schema	Automatic from WooCommerce data model	Fixed Shopify schema (but comprehensive)
Custom fields	ACF fields auto-exposed via WPGraphQL ACF plugin	Metafields exposed via Storefront API (with allowlist)
Cart	WooCommerce session-based (CoCart for headless)	Cart API — stateless, ID-based, no session
Checkout	Custom checkout page in frontend (complex)	Hosted Shopify checkout via checkoutUrl
Real-time inventory	REST polling or custom subscriptions	availableForSale field, quantityAvailable per variant
Auth/customers	WordPress JWT tokens	Customer access tokens via Storefront API
Rate limits	Server-dependent	1000 cost units/second (GraphQL cost-based)
Hosting backend	WordPress server	Shopify (no server to manage)

Should you go headless after migrating to Shopify?

Headless commerce adds significant development complexity. Consider it only if:

You need a completely custom frontend that a Shopify theme can't deliver (complex product configurators, very custom UX patterns)
You need to integrate deeply with a CMS (Contentful, Sanity, Storyblok) for content-heavy stores
Your team is comfortable with React/Next.js and GraphQL
You need performance beyond what optimized Shopify themes provide (rarely the bottleneck)

For most WooCommerce migrations, a well-configured Shopify theme performs excellently and requires far less development overhead. Shopify's official themes (Dawn, Sense) are highly optimized and customizable with Liquid + theme sections.

If you were on headless WooCommerce for performance reasons, an optimized Shopify theme often performs comparably or better — Shopify's CDN and image optimization can match custom headless performance for typical ecommerce pages.

Migrating a headless WooCommerce frontend to Shopify

If you have an existing headless WooCommerce frontend (Next.js + WPGraphQL) and want to keep the same frontend architecture:

Replace data layer: Swap WPGraphQL queries for Shopify Storefront API queries. Field mapping per the WooCommerce → Shopify data mapping.
Cart rewrite: WooCommerce session-based cart (CoCart) → Shopify Cart API. Stateless approach is simpler.
Checkout redirect: Replace WooCommerce checkout page with redirect to cart.checkoutUrl.
Auth: Replace WP JWT auth with Shopify Storefront API customer access tokens.
Metafields: Product metafields need to be allowlisted in Shopify Admin → Settings → Custom data → Storefront access to be readable by the Storefront API.

Hydrogen quickstart for WooCommerce developers

npx degit Shopify/hydrogen/templates/skeleton my-hydrogen-store
cd my-hydrogen-store
npm install
cp .env.example .env

# Add to .env:
# SESSION_SECRET=xxx
# PUBLIC_STOREFRONT_API_TOKEN=storefront_xxx
# PUBLIC_STORE_DOMAIN=your-store.myshopify.com

npm run dev

The Hydrogen skeleton template includes a complete product listing, product detail page, cart, and checkout redirect. Compare this to the significant boilerplate required for a WooCommerce headless setup — Hydrogen covers cart and checkout out of the box without CoCart or similar workarounds.

For most WooCommerce developers evaluating Shopify: start with a regular Shopify theme. Go headless only if you have specific requirements that themes genuinely can't meet — not for performance, not for "control", but for truly custom frontend requirements.

Shopify headless commerce for WooCommerce developers (2026)