Shopify Hydrogen vs Framer: Two Paths to a Headless Storefront

Should you build your headless Shopify store with Hydrogen or Framer? Shopify Hydrogen is a React framework for engineering teams who want full control of the code. Framer is a visual builder that lets a designer ship a comparable storefront without writing any. Choose based on who will build and maintain the site twelve months from now, not on which demo looks better today.

Both options sit in front of the same Shopify checkout and pull from the same Storefront API. Neither replaces Shopify itself — you still pay for a plan, which starts at $39 per month on Basic. What changes is the layer customers actually see, and the skill set required to keep it alive.

What is Shopify Hydrogen?

Shopify Hydrogen is Shopify's official React framework for building a custom storefront that talks to Shopify through the Storefront API. It ships with commerce-specific components, a CLI and a TypeScript-first developer experience, and it is normally deployed to Oxygen, Shopify's own edge hosting. Oxygen is included free with every paid Shopify plan, and roughly 90% of production Hydrogen builds run on it.

That combination is what people mean by headless Shopify Hydrogen: Shopify keeps the catalogue, cart logic, payments and checkout, while a React application you own renders everything up to the checkout handoff. The same architecture is available through other stacks — a headless Shopify Next.js build does the same job — but Hydrogen is the path Shopify supports directly.

A Framer build reaches the same end state from the other direction. The designer works on a canvas, a connector pulls live products and inventory into the page, and the shopper is handed to Shopify's hosted checkout. We cover that pattern in depth in using Framer as a headless Shopify frontend.

Hydrogen vs Framer: the side-by-side

The table is the whole argument in miniature. Hydrogen buys an unlimited ceiling and charges for it in engineering time. Framer caps the ceiling somewhere short of fully custom and gives you back the calendar.

How long does it take to launch a Hydrogen storefront?

Plan on a quarter, not a sprint. Agency estimates put a focused single-brand Hydrogen build at 12 to 21 weeks end to end, split across discovery, component development, integration and handover, with multi-region or multi-brand projects running past 24 weeks. A launch promised in under ten weeks usually means a reskinned template.

A Framer storefront compresses that because there is no component library to build and no deployment pipeline to stand up. The designer is working in the finished medium from the first hour. The trade is that you inherit the connector's data model instead of defining your own.

What does each one actually cost to run?

The hosting line is the misleading one. Oxygen is free, so a Hydrogen storefront looks cheaper than a $30-per-month Framer Pro plan until you add the people. The same agency guidance puts ongoing Hydrogen maintenance at $3,900 to $13,000 per month, covering version planning, dependency updates, observability and feature work.

Framer's equivalent line item is the site plan plus whatever the Shopify connector charges. For a small brand that difference is the entire business case. We break the full stack down in our 2026 headless ecommerce platform cost benchmark.

Who pays when the Storefront API changes?

Whoever owns the code. Shopify releases a new API version every three months and supports each stable version for a minimum of twelve months, so a headless storefront is never finished — it is on a recurring upgrade clock.

The 2026-07 release made that concrete. Weaverse estimates remediation at $0–$2,000 for a current Hydrogen build that can lean on codemods, rising to $2,000–$8,000 for older Hydrogen versions and $8,000–$25,000 for a custom Next.js Commerce frontend. We tracked what shifted in the 2026-07 Storefront API changes.

Treating maintenance as optional is the most common reason Hydrogen projects regret their decision twelve months in. — Charle Agency, Shopify Hydrogen and Oxygen: The Complete 2026 US Guide

On a managed connector that upgrade work is the vendor's problem. You notice an API version change only if something visibly breaks.

Who can edit the site after launch?

This is the question that decides most builds, and it rarely appears in the pitch deck. On Hydrogen, a new landing page, a seasonal hero or a reordered product grid is a code change, a review and a deploy. On Framer, the person who designed the page opens it and edits it — which is why design-led teams running on FramerLink keep shipping after launch instead of queueing tickets.

If your marketing team changes the storefront weekly, the Hydrogen maintenance line stops being insurance and starts being rent.

So which one should you pick?

Three questions settle it:

1. Do you employ React engineers today? If no, Hydrogen is an agency retainer in disguise.
2. Does your storefront need behaviour a connector cannot express — custom bundling logic, a configurator, unusual B2B pricing? If yes, Hydrogen earns its cost.
3. Who edits the site in month six? If the answer is a designer or a marketer, choose the tool they can open.

Hydrogen is the right call for teams with engineering capacity and genuinely custom commerce logic. Framer is the right call for design-led brands that want a custom-looking storefront, a real Shopify checkout behind it, and no standing upgrade bill. Most small and mid-sized brands asking this question are in the second group and have been told they belong in the first.