What Is Headless Commerce?
Headless commerce separates the frontend presentation layer from the backend commerce engine. Instead of using Shopify’s built-in theme system, you build a custom frontend using modern frameworks that connect to Shopify’s Storefront API. This architecture offers maximum flexibility and performance but comes with added complexity and cost.
Why Consider Headless?
Performance
Headless storefronts built with React frameworks deliver sub-second page loads through server-side rendering, static generation, and edge computing. For performance-critical brands, headless can achieve Lighthouse scores that traditional themes cannot match. Compare with our standard speed optimisation results to determine if headless is necessary.
Design Freedom
No theme system constraints. Build any layout, interaction pattern, or visual design. This suits brands with highly custom or interactive product experiences — 3D configurators, AR try-on, complex product builders.
Multi-Platform Content
A headless architecture lets you serve content from a single backend to multiple frontends — web, mobile apps, kiosks, smart displays, and marketplaces. If you operate across many channels with consistent content, headless provides a single source of truth.
Shopify Hydrogen
What Is Hydrogen?
Hydrogen is Shopify’s React framework for building custom storefronts. It provides Remix-based routing, Shopify-specific components and hooks, cart management, customer authentication, and SEO utilities out of the box.
Oxygen Hosting
Oxygen is Shopify’s edge hosting platform for Hydrogen storefronts. It deploys your frontend to Shopify’s global CDN with automatic scaling, SSL, and CI/CD integration. This eliminates the need for separate hosting infrastructure.
When Hydrogen Makes Sense
- Brands spending over $10K/month on paid traffic where speed directly impacts ROAS
- Complex product experiences requiring custom interactions
- Multi-brand or multi-region setups with shared backend logic
- Teams with React/Remix development expertise
Alternatives to Full Headless
Custom Shopify Theme
A well-built custom Shopify theme using Online Store 2.0 delivers excellent performance with far lower development and maintenance costs. For most brands, this is the optimal choice. Our themes consistently achieve 90+ Lighthouse scores.
Hybrid Approach
Use Shopify’s theme system for most pages and headless only for specific high-performance sections — product configurators, custom landing pages, or interactive shopping experiences. This reduces complexity while adding flexibility where needed.
The Hidden Costs of Headless
Development Costs
Headless storefronts cost 3-5x more to build than custom themes. Every feature that comes free with themes — cart, checkout, customer accounts, search — must be built and maintained. Budget $30,000-$100,000+ for initial development.
Ongoing Maintenance
Framework updates, API version migrations, security patches, and feature additions require ongoing development resources. Budget for a dedicated development team or agency retainer. Custom apps and integrations add further complexity.
App Ecosystem
Most Shopify apps are built for the theme ecosystem and will not work headless. You need API-first alternatives or custom integrations for reviews, email capture, loyalty programmes, and other essential features.
Decision Framework
Go headless only if: you have the budget (6-figure initial, 5-figure monthly), the development team, performance requirements that cannot be met with a custom theme, or multi-platform content delivery needs. For everyone else, invest in a quality custom Shopify theme.
Considering headless? Get an architecture assessment from our engineering team.
