Hydrogen v2

Hydrogen v2 is a minimal Shopify headless-commerce storefront boilerplate from the Vercel examples collection that deploys to Vercel with zero configuration, giving developers a working starting point for a Hydrogen storefront instead of an empty repository.

What is Hydrogen v2?

Hydrogen v2 is a starter storefront built on Hydrogen, Shopify's stack for headless commerce, which is designed to dovetail with Remix, Shopify's full-stack web framework. It ships a minimal set of components, GraphQL queries and tooling so a developer can connect to a Shopify backend and start building custom storefront pages. It is published as a framework boilerplate in the Vercel examples repository and can be cloned and deployed directly, either through the Vercel deploy flow or the Vercel CLI.

What's included in the template?

• Remix — the full-stack web framework the storefront is built on, handling routing and server rendering.
• Hydrogen — Shopify's headless commerce layer providing the storefront components and data queries.
• Oxygen — Shopify's hosting platform listed as part of the included stack.
• Shopify CLI — used for the Shopify dev server and local development workflow.
• GraphQL generator — generates typed GraphQL code for querying the Shopify Storefront API.
• TypeScript and JavaScript flavors — the template is available in both language variants.
• ESLint and Prettier — linting and formatting configuration included out of the box.
• Minimal components and routes — a small starting set of components and routes rather than a full theme.

Who should use the Hydrogen v2 template?

Shopify developers starting a custom headless storefront who want Remix routing and Hydrogen commerce components already wired together. Agencies prototyping a client storefront on Shopify's official stack without scaffolding a project from scratch. Vercel users who want a Shopify-connected app deployed to Vercel with the environment variables preconfigured. Learners exploring how Hydrogen and Remix combine, using the minimal component and route setup as a readable reference.

What can you do with Hydrogen v2?

Launch a storefront quickly: clone the boilerplate to Vercel and get a running Hydrogen storefront connected to Shopify with the default environment variables applied at deploy time. Build custom storefront pages: add routes and components on top of the included minimal set while using the GraphQL generator to type your Shopify queries. Run local development against Shopify: rename .env.example to .env, run npm install and npm run dev, and develop with the Shopify dev server.

How does the Hydrogen v2 template work?

Deploy the repository through the Vercel clone flow or run npm i -g vercel followed by vercel. The template's minimal environment variables are defined in vercel.json and applied on deployment; you are expected to migrate them into your Vercel project's environment variable settings, change SESSION_SECRET to your own value, then delete vercel.json so it no longer takes precedence.

FAQ

Does Hydrogen v2 require a Shopify account?

Yes. Hydrogen requires environment variables that connect to Shopify, so you need Shopify credentials and a storefront to fetch real data. The template ships a minimal default set in vercel.json and a .env.example file for local development.

Can I deploy Hydrogen v2 without configuring anything?

It deploys to Vercel with zero configuration, and the defaults in vercel.json are applied automatically. Vercel recommends moving those variables into your project settings and deleting vercel.json afterwards so your own values take precedence.

What framework does Hydrogen v2 use?

It is built on Remix, Shopify's full-stack web framework, with Hydrogen providing the headless commerce layer. The template also includes ESLint, Prettier, a GraphQL generator, and both TypeScript and JavaScript flavors.

Is Hydrogen v2 free to use?

The boilerplate is an open example hosted in the Vercel examples repository and can be cloned for free. Any costs come from the hosting and Shopify plans you connect it to.