Hydrogen is Shopify’s React-based framework for building custom storefronts using the Storefront API. It’s the right choice when you need a fully custom UI, blazing-fast performance, or an omnichannel experience beyond what themes provide.
What is Headless Commerce?
Traditional Shopify uses a theme that runs in Shopify’s server environment. Headless separates the frontend (your custom React app) from the Shopify backend (products, orders, checkout). You build the frontend however you want; Shopify handles commerce operations.
When to Use Hydrogen
- You need UI/UX that’s impossible within Shopify’s theme system
- You have a dedicated frontend development team
- You’re building a mobile app and a web storefront from the same commerce backend
- Performance is critical (Hydrogen uses React Server Components for near-instant loads)
Hydrogen + Oxygen Architecture
Hydrogen is the framework (React + Remix-based). Oxygen is Shopify’s global hosting platform for Hydrogen apps. Oxygen is free for Shopify stores and deploys to 300+ edge locations for minimal latency worldwide.
Getting Started with Hydrogen
npm create @shopify/hydrogen@latestThis scaffolds a Hydrogen app with:
- Storefront API client set up
- Cart management
- Product routing
- Collection pages
- Customer authentication
Key Hydrogen Concepts
- Storefront API: GraphQL API for browsing products, collections, and blog posts
- Cart API: Manage cart items, quantities, and discounts
- Customer Account API: Log in, manage orders, addresses (new in 2024)
- Predictive Search API: As-you-type search suggestions
Limitations of Headless
- You lose Shopify’s theme editor — all changes require code deployments
- App compatibility varies — many Shopify apps are theme-based and won’t work headless
- Higher development complexity and cost
- Analytics integration requires more manual setup
