A standard Shopify theme is a constraint and a convenience. It ships fast and handles most use cases but limits page speeds and design expression. When a brand outgrows theme templates or needs multi-surface delivery, headless commerce removes that ceiling. Oddtusk builds Shopify Hydrogen storefronts and decoupled architectures for brands with the traffic and revenue base to justify this engineering investment : and we will tell you honestly when a well-optimised theme is the better choice for your stage of growth.
- Shopify Hydrogen Frontend Build
- Headless Architecture Design
- Storefront API and GraphQL Integration
- Headless CMS Integration
- Core Web Vitals Engineering
- Edge Deployment (Oxygen / Vercel)
- Theme-to-Headless Migration
Headless is not the right answer for every brand. We tell you when headless is not right, because building the wrong architecture is costlier than not building at all.
Headless commerce is a genuine architectural upgrade for brands needing sub-2-second LCPs and complete design freedom. It is the wrong investment for brands that would achieve the same outcomes with an optimised Shopify theme at a lower cost. Oddtusk evaluates every inquiry against actual business requirements before recommending an architecture. Our goal is the best outcome for your revenue : not the most technically impressive project. We connect all performance analytics back to a unified GA4 view so every architectural decision is grounded in measurable conversion data.
Shopify Hydrogen Frontend Build
We build Shopify Hydrogen storefronts using React and Remix for brands needing performance and flexibility beyond the theme system. Builds are scoped from requirements covering templates, user flows, app integrations, and performance targets. Component architecture is designed for maintainability, allowing your internal team to extend and update the site without full agency dependency after launch. The result: a storefront that feeds clean conversion data back into GA4 for ongoing optimisation.
Headless Architecture Design
Before writing code, we design the full headless stack: framework choice, CMS platform, and edge deployment strategy. Architecture decisions determine the total cost of ownership and the performance ceiling the system can achieve. We document every decision and its rationale. For brands comparing headless against an optimised Shopify build, we produce a side-by-side cost-outcome analysis before recommending a direction.
Storefront API and GraphQL Integration
The Storefront API exposes your full catalogue through a GraphQL interface that the Hydrogen frontend queries. We design query structures for minimal payloads and implement response caching at the edge. Cart and checkout flows deliver smooth purchase experiences without latency. Version management and breaking change handling are included in our maintenance services to ensure data pipelines remain stable as Shopify updates its API infrastructure.
Headless CMS Integration
For brands with significant editorial requirements, a headless CMS is integrated so teams manage content independently of the development cycle. We work with Sanity or Storyblok depending on your content complexity. Models are designed to match frontend components, ensuring editors produce output that renders correctly without development intervention. This decoupling allows your marketing team to launch campaigns at much higher velocity than theme-based publishing workflows.
Core Web Vitals Engineering
Performance targets are engineered into the implementation rather than optimised later. Largest Contentful Paint is addressed through server-side rendering and optimised image delivery. Cumulative Layout Shift is prevented through explicit dimension declarations and skeleton loading states. Total Blocking Time is reduced through code splitting and elimination of render-blocking scripts. All performance metrics are tracked and correlated with conversion rate improvements in GA4.
Theme-to-Headless Migration
Migrating to Hydrogen requires a programme that protects SEO equity and prevents revenue disruption. We run theme and headless environments in parallel for validation before cutover. All URLs are mapped and redirected to maintain continuity. Structured data and sitemaps are implemented to match your outgoing theme's SEO configuration. We use A/B traffic splitting for gradual rollout, ensuring a seamless transition that preserves your organic traffic alongside the paid acquisition that depends on store uptime.
60% LCP improvement vs Shopify theme. 95+ Lighthouse score on mobile. 3x faster frontend iteration for brands with in-house engineering teams.
Shopify Hydrogen builds deployed on Oxygen edge infrastructure consistently achieve 50 to 70 percent improvement in Largest Contentful Paint compared to equivalent Shopify theme builds, typically moving from 3 to 5 second LCP on mobile to under 1.5 seconds.
Hydrogen storefronts built with server-side rendering, optimised GraphQL queries, responsive image delivery, and minimal third-party script loading consistently achieve Lighthouse scores of 95 or above on mobile. Confirming Core Web Vitals compliance that contributes to Google Search ranking signals tracked alongside CRO outcomes.
Brands with in-house engineering teams that migrate to headless architecture report three times faster frontend iteration speed compared to Shopify theme development. React component-based architecture, TypeScript typing, and modern frontend tooling enable faster development and more confident deployment than Liquid theme customisation at scale.
From architecture decision to production headless storefront
Requirements Audit and Architecture Decision
Design System and Component Architecture
Hydrogen Build and Storefront API Integration
CMS Integration and Content Modelling
Performance Testing and SEO Implementation
Launch, Migration Validation and Handover
Straight answers to the questions that matter.
Headless commerce separates the frontend presentation layer from the backend commerce engine managing products, inventory, orders, and checkout. In traditional Shopify theme builds, frontend and backend are tightly coupled. In headless commerce, the frontend is built independently using React or Next.js and communicates with the commerce backend through APIs. This separation gives development teams complete control over the user experience while retaining the commerce capabilities of proven backend platforms.
Shopify Hydrogen is Shopify's official React-based framework for building custom storefronts connected to Shopify's commerce backend through the Storefront API. Built on Remix, it provides components and utilities for ecommerce use cases including cart management, product display, collection pages, checkout integration, and customer accounts. Hydrogen is the recommended headless approach because it maintains first-party Shopify support and can be deployed on Shopify's Oxygen edge hosting infrastructure. See our dedicated Shopify development service.
Headless storefronts consistently achieve significantly better Core Web Vitals scores than equivalent Shopify theme builds. Largest Contentful Paint times below 1.5 seconds are achievable with proper image optimisation, edge caching, and server-side rendering. For brands where page speed directly correlates with conversion rate : which is most mobile-first ecommerce brands in India : the performance improvement translates directly into measurable revenue uplift tracked in GA4.
Headless commerce is the right investment when page speed is demonstrably limiting conversion rate on mobile, when the required UX cannot be achieved within standard Shopify themes, or when the brand needs to serve commerce across multiple surfaces from a single backend. For brands without these specific requirements, a well-optimised Shopify theme typically delivers better business outcomes per development rupee spent. Many D2C brands achieve strong results through optimised themes before graduating to headless.
The Shopify Storefront API is a GraphQL API that exposes Shopify's commerce data including products, collections, variants, pricing, inventory, cart, checkout, and customer accounts to external frontends. It is the data connection layer that makes headless Shopify builds possible. Performance optimisation involves designing GraphQL queries that fetch only the fields required for each page to minimise response payload size and time, with all purchase events wired back to GA4 for accurate revenue attribution.
A headless CMS such as Contentful, Sanity, or Storyblok stores editorial content independently of the commerce platform and delivers it via APIs the frontend queries alongside commerce data. For ecommerce brands, a headless CMS decouples content publishing from development releases : the marketing team can update editorial content without requiring a developer deployment. For most brands, the CMS integration is optional and most valuable when editorial content volume justifies the operational overhead of managing a separate content platform.
SEO on headless storefronts requires deliberate implementation that does not come automatically as it does with Shopify's standard theme system. Server-side rendering or static site generation is required for product and collection pages to ensure search engines receive fully rendered HTML. Meta tags, structured data, canonical URLs, sitemap generation, and robots.txt must all be implemented in the frontend application code. This is where a prior technical SEO audit of the existing store proves valuable. When implemented correctly, headless storefronts can achieve equal or better SEO performance than theme-based stores due to superior page speed and more precise control over the rendered HTML output.
Headless commerce development is significantly more expensive than Shopify theme development in both initial build cost and ongoing maintenance. A custom Hydrogen build for a medium-complexity catalogue typically costs three to five times more than an equivalent theme build. Ongoing maintenance requires JavaScript frontend engineering capability rather than Liquid theme development. The higher cost is justified when the business outcomes : conversion rate improvement from performance, design flexibility, or multi-surface commerce : deliver a measurable revenue return that exceeds the cost differential.
Shopify Oxygen is Shopify's edge hosting infrastructure designed specifically for Hydrogen storefronts. It deploys the frontend to Shopify's global edge network, reducing Time to First Byte by eliminating the latency of requests travelling to a centralised server. Oxygen handles deployment, scaling, and edge caching automatically, making it the simplest and most performant hosting option for Hydrogen builds. Alternative deployment options including Vercel, Netlify, and Cloudflare Workers are also compatible with Hydrogen.
A Shopify Hydrogen build for a brand with a standard product catalogue, collection pages, cart, checkout, and customer accounts typically takes 8 to 16 weeks from design specification to production launch. Brands migrating from a Shopify theme to Hydrogen should expect a migration phase covering data validation, redirect mapping, SEO implementation verification, and parallel running before the headless frontend replaces the existing theme.