[STOREFRONT LAYER] Hydrogen Shopify Agency

Headless Storefront

Built on Hydrogen, not on a theme.

The storefront is the surface every other layer reaches the customer through. We build it from zero on Shopify Hydrogen — React Server Components, edge runtime, streamed product pages — because theme code cannot hold a 1,200-variant catalogue at the speed and clarity our brands need. Accessibility and performance are not retrofits; they are the gate the build ships through.

LAYER01/06of the system we build
SURFACES05capabilities in this layer
STACK05technologies on the bench
SOLD ASSYSTEMnever as a single service
N°01The layer

What ships in this layer.

5 surfaces, all built as part of the same system. None of them ship alone — they are the parts that make this layer work inside the whole.

  1. 01ENGINEERING

    Hydrogen · RSC · Storefront API

    React Server Components for the catalogue, Storefront API for the data, Tailwind for the system. No theme, no plugin layer.

  2. 02EDGE DELIVERY

    Edge runtime · streamed routes

    HTML rendered at the edge, RSC chunks streamed, images served from the nearest POP. Catalogue and cart routes cached against invalidation, not TTL.

  3. 03PERFORMANCE

    Sub-2 s LCP · CWV pass on the live URL

    p75 LCP under 2.5 s on mobile 4G, CLS under 0.05, INP under 200 ms. Measured on production, not on staging. If a route fails the gate, it ships dark until it does not.

  4. 04ACCESSIBILITY

    WCAG AA by default · audited per ship

    Keyboard-navigable, screen-reader-tested, contrast-checked, focus-visible. Cart drawer traps focus and returns it. Motion respects prefers-reduced-motion. Axe-clean before any route goes live.

  5. 05DESIGN SYSTEM

    Tokens · components · motion

    Colour, type, spacing, and motion live in a single token system. Components are built against that system, not against a Figma artboard. The brand survives the next redesign without a rebuild.

Why this layer is part of the build.

growth system has nowhere to live if the storefront is slow, inaccessible, or themed against the way buyers actually shop material. Page weight kills attribution before it starts. A theme that cannot index variants kills the SEO layer above it. A cart that does not trap focus kills the trade buyer who shops with a screen reader. The storefront layer exists to make every other layer of the system possible — and to ship at standards we will not move on.

WHAT WE ARE NOT

We do not take this layer as a retrofit on a storefront we did not build. If that is the work, the right call is an agency. We build the system the layer lives inside.

N°03Technical bench

How this layer is actually built.

The stack is on the bench, the wiring is documented, and the instance shipped with your system is yours to extend after handover.

ON THE BENCH
  • 01Hydrogen
  • 02RSC
  • 03Edge runtime
  • 04Storefront API
  • 05Tailwind
5 layers · all yours after handover

Built on Shopify Hydrogen 2 with React Server Components, deployed to the Vercel or Oxygen edge runtime. Storefront API for catalogue and cart, with image and metafield optimisation handled at build time. Tailwind v4 for the design system, custom token layer for theming. A11Y and performance audits run on every PR; the production URL is the source of truth, not a synthetic test.

p75 LCP · mobile 4G
1.74 s
audited per ship
WCAG AA
client JS at idle
0 kb
N°04Where it lives in the system

Inside the system you would ship.

The layer does not stand alone. These are the standing systems most often built on top of it and the adjacent layers it interlocks with.

SYSTEMS BUILT ON THIS LAYER

N°02

Sq Ft Calculator

zerounder-orders shipped

Cart-aware area calculator for products sold by the box. Pattern, waste factor, min-buy logic.

N°03

FTL Simulator

livefreight rate in cart

Real-time truck-fill estimation as customers shop. Fill % and freight bracket update live.

N°05

Pattern Visualizer

to scalein-browser canvas render

French Pattern / ledger / mosaic — show exactly how the pattern lays into a real room. PDF export.

ADJACENT LAYERS · INTERLOCK

N°04MarketingDiscovery, demand, and lifecycle — engineered into the system.
N°02Operations AutomationWhere the work actually breaks — between systems.

[N°05] Common questions

The questions this layer answers.

How the headless storefront layer behaves in production — the trade-offs we have already taken and the ones we re-open per build.

  1. What does a Hydrogen Shopify agency build?

    A Hydrogen Shopify agency builds the storefront on Shopify Hydrogen — React Server Components on the edge runtime, the Storefront API as the data graph, and full ownership of routes, cart, and product pages outside Shopify's theme system. We build Hydrogen storefronts as the first layer of a six-layer system, never as a single deliverable.

  2. Why Hydrogen and not a fast Shopify theme?

    A theme cannot stream React Server Components, cannot ship sub-2s LCP on a 1,200-variant catalogue, and cannot index variants the way a material catalogue needs. Hydrogen can — that is why the storefront layer is built on it.

  3. Do you migrate an existing Shopify theme to Hydrogen?

    Yes. Theme-to-Hydrogen migrations are the most common shape of the storefront layer in a rebuild. We map theme sections to Hydrogen routes and React Server Components, keep the data graph on the same Shopify admin, and ship 301s where the URL structure changes.

  4. What does WCAG AA mean in practice?

    Keyboard reachability on every interactive surface, focus traps in the cart and quote drawers, contrast that passes on every accent and ink token. Tested on the live URL, not on staging.

  5. Do you build on Shopify Plus?

    Plus is the platform tier we recommend for any catalogue past five hundred active variants. We build on Plus, Shopify Markets, and B2B simultaneously when the brand needs both retail and trade rails.

  6. What performance target do you ship to?

    p75 LCP under 2.5 seconds on mobile 4G, CLS under 0.05, INP under 200 ms. Measured on production traffic, not on a staging probe.

N°06Next step

You want this layer? You want the whole system.

We do not take this layer as a one-off. We build from zero and grow with the brand. Every engagement begins with a paid discovery — fit before contract.

N°AOPEN A BRIEF

Build the whole system

Paid discovery sets the shape. We map your case across all six layers and ship the system the storefront layer lives inside.

N°BREAD THE PRACTICE

How the work runs

Six chapters on how the system gets built — origin, journey, discipline, outcomes, handover. The story behind the layers.