Shopify and Vercel are rebuilding Hydrogen, and the custom storefront lane just got wider

At Vercel Ship 26 in New York, Shopify VP of Product Vanessa Lee and Vercel Chief Product Officer Tom Occhino shared a stage to announce something most DTC operators will never install themselves, but will hear about constantly over the next year: a ground-up rebuild of Hydrogen, Shopify's toolkit for custom storefronts.

The headline is partnership, not product launch. Shopify and Vercel are betting that the future of high-end ecommerce is not locked to one hosting company or one JavaScript framework. Hydrogen is going open source and runtime agnostic. Stores built with it can run on Vercel, elsewhere, and eventually with Svelte, Nuxt, or Next.js.

For the majority of Shopify brands running a purchased theme, nothing in the admin changed. This story is about the advanced lane: what happens when a brand outgrows templates and needs a storefront that behaves more like a media property than a catalog.

Read more: vercel.com/blog/vercel-and-shopify-are-rebuilding-hydrogen · Vercel Shopify integration

The split most brands already live with

Most Shopify stores work the way they always have. Products, inventory, checkout, and payments live in Shopify. A theme controls what shoppers see. You edit both in the admin and theme customizer. That stack powers millions of merchants and it is not going anywhere.

Headless is the version of the same business where the browsing experience is built separately. Shopify still runs the commerce engine. Orders, taxes, fraud, and checkout still flow through the platform shoppers already trust. The difference is the front end: homepage, product pages, editorial layouts, and brand storytelling are designed and hosted outside the theme system, usually by an agency or in-house engineering team.

Brands move to that model when a theme starts blocking growth: page speed targets, international complexity, editorial volume, or a shopping experience that needs to feel bespoke rather than configured.

What Hydrogen, Vercel, and Next.js actually are

These names show up together because they solve different layers of the same problem.

Hydrogen is Shopify's shared commerce layer for custom storefronts. It handles the repetitive work every headless build used to rewrite from scratch: formatting Shopify's price data, cart behavior, product queries, and the API glue between a custom site and Shopify's backend. The rebuild makes that layer portable. Fix a bug once, every storefront benefits.

Vercel is the hosting and deployment platform where many of these storefronts live. It publishes the site, handles traffic spikes, and pairs naturally with modern JavaScript frameworks. Merchants do not log into Vercel to swap a hero image. Developers and agencies do, the same way Shopify hosts your theme today but for a hand-built experience.

Next.js is the framework a large share of headless Shopify builds use. It is optimized for fast page loads, SEO, and complex layouts. When an agency proposes a Next.js storefront, they mean a custom site engineered for performance, not a Theme Store download.

Vercel also maintains Next.js Commerce, a starter template agencies fork to accelerate builds. It is a blueprint, not a plug-and-play theme. Customization and maintenance still require engineering.

What the Hydrogen rebuild changes

The first generation of Hydrogen made headless Shopify easier to ship, but it was tied to specific hosting and patterns. The new version splits the work into three layers:

• Core: Shared utilities for Shopify API data (prices, product types, formatting). Less duplicate code across projects.

• Client: Cart and browser-side shopper interactions, so teams stop rewriting cart logic on every build.

• Server: Guidance for caching product data, streaming inventory, and staying fast at scale with frameworks like Next.js.

The practical effect for brands already on a custom stack: faster builds, lower maintenance, fewer one-off integrations. For everyone else, it signals that Shopify and Vercel want the custom storefront path to feel less like a science project.

The Vercel marketplace integration

Alongside the Hydrogen news, Vercel ships a native Shopify integration designed to collapse setup friction for teams starting a headless build.

Install the integration and Vercel connects an existing store or spins up a test environment. API credentials land in the project automatically. The merchant admin stays the same. The developer stops manually wiring tokens between dashboards.

Vercel is also positioning the stack for AI-assisted development. Tools like v0, Claude Code, and Codex can scaffold storefronts from prompts and iterate on layout and copy in code. That compresses early build time, but brand QA, merchandising standards, and post-launch maintenance still sit with the team running the store.

What does not change is checkout. Even with a fully custom front end, Shopify still powers payments. Headless stores keep access to Shop Pay, which Vercel cites as a high-converting checkout trusted by 250M+ shoppers. Fraud protection, payment rails, and order emails stay on Shopify even when product pages look nothing like a theme.

The same applies internationally. Shopify already handles selling in 175+ countries, multi-currency, localized checkout, and payments infrastructure. Headless is not an invitation to rebuild tax and fraud from scratch. It is a custom browsing layer on top of commerce infrastructure that already exists.

Who is already on this stack

Vercel's headless Shopify case studies include Bombas, Ruggable, Hydrow, Made In, Paige, and Magda Butrym. These are typically high-traffic or design-forward brands where performance, editorial storytelling, or a non-template UX justified the engineering investment.

Shoppers on those sites still checkout through Shopify. Receipts, order status, and much of post-purchase still run through the platform even when the browsing experience is entirely custom.

What this means if you run a theme today

Shopify is not replacing themes. Themes remain the default on-ramp. Headless is the lane brands enter when templates stop matching the ambition of the business.

What shifted this week is the cost and portability of that lane. Shared tooling (Hydrogen), native setup (Vercel's integration), and AI-assisted scaffolding mean custom storefronts should require less bespoke plumbing over time. That matters for brands already investing in custom builds. It does not mean every theme-based store should migrate.

If an agency pitches headless, the useful questions are the same as any major rebuild: what problem does the theme actually fail to solve, which Shopify systems still own checkout and fulfillment, and who maintains the site six months after launch. The terminology is industry shorthand for a real architectural choice, not a upgrade badge.