Headless commerce
A custom storefront separated from the commerce backend, connected by APIs for products, carts, customers, and checkout.
See it
What it is
Headless commerce separates the customer-facing storefront from the commerce backend. A custom web app, mobile app, kiosk, or other 'head' reads products and carts through APIs while a platform such as Shopify still owns catalog data, pricing, orders, and checkout. Shopify ships Hydrogen, its own React framework, for exactly this split.
Reach for it when a platform theme cannot deliver the interaction, content model, performance control, or multi-surface experience the business needs. The trade is responsibility: your team now owns the frontend deployment, caching, search, analytics wiring, previews, and many storefront features the theme used to provide.
Gotcha: decoupled does not mean independent. API limits, schema changes, webhook delays, and checkout constraints still shape the experience. Cache public catalog reads, keep price and inventory authoritative on the server, and plan how redirects, metadata, sitemaps, and preview content work before replacing an indexed storefront.
Ask AI for it
Build a headless storefront in Next.js using Shopify's Storefront GraphQL API. Render collection and product pages as Server Components, use Next.js revalidateTag for catalog cache invalidation from Shopify webhooks, and keep Storefront API tokens server-side. Implement variant selection, cart creation and updates, localized prices, predictive search, canonical URLs, JSON-LD Product markup, sitemap generation, and a redirect to Shopify-hosted checkout. Revalidate price and availability before checkout, preserve cart identity in an httpOnly cookie, and add loading, empty, unavailable, rate-limit, and API-failure states.