With the hardest parts of the storefront built in, ready to use, or easily integrated with Shopify, Hydrogen’s React-based framework makes building headless storefronts fun.

Read documentation

useListView(!listView)

Built for commerce

Starter templates

Two ways to get started: Fully built-out Demo Store template includes purchase journey and Hello World template offers minimal opinions with optional TypeScript support

cart.client.jsx
import {useRef} from 'react';
import {useScroll} from 'react-use';
import {
useCart,
CartLineProvider,
CartShopPayButton,
Money,
} from '@shopify/hydrogen';
import {Button, Text, CartLineItem, CartEmpty} from '~/components';
export function CartDetails({
layout,
onClose,
}: {
layout: 'drawer' | 'page';
onClose?: () => void;
}) {
const {lines} = useCart();
const scrollRef = useRef(null);
const {y} = useScroll(scrollRef);
if (lines.length === 0) {
return <CartEmpty onClose={onClose} />;
}
const container = {
drawer: 'grid grid-cols-1 h-screen-no-nav grid-rows-[1fr_auto]',
page: 'pb-12 max-w-7xl mx-auto w-full flex flex-col md:flex-row md:items-start gap-4 md:gap-8 lg:gap-12',
};
const content = {
drawer: 'px-6 pb-6 sm-max:pt-2 overflow-auto transition md:px-12',
page: 'flex-grow md:translate-y-4',
};
const summary = {
drawer: 'grid gap-6 p-6 border-t md:px-12',
page: 'sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-primary/5 rounded w-full max-w-md',
};
return (
<form className={container[layout]}>
<section
ref={scrollRef}
aria-labelledby="cart-contents"
className={`${content[layout]} ${y > 0 && 'border-t'}`}
>
<ul className="grid gap-6 md:gap-10">
{lines.map((line) => {
return (
<CartLineProvider key={line.id} line={line}>
<CartLineItem />
</CartLineProvider>
);
})}
</ul>
</section>
<section aria-labelledby="summary-heading" className={summary[layout]}>
<h2 id="summary-heading" className="sr-only">
Order summary
</h2>
<OrderSummary />
<CartCheckoutActions />
</section>
</form>
);
}
function CartCheckoutActions() {
const {checkoutUrl} = useCart();
return (
<>
<div className="grid gap-4">
<Button to={checkoutUrl} width="full">
Continue to Checkout
</Button>
<CartShopPayButton />
</div>
</>
);
}
function OrderSummary() {
const {cost} = useCart();
return (
<>
<dl className="grid">
<div className="flex items-center justify-between">
<Text as="dt">Subtotal</Text>
<Text as="dd">
{cost?.subtotalAmount?.amount ? (
<Money data={cost?.subtotalAmount} />
) : (
'-'
)}
</Text>
</div>
</dl>
</>
);
}

Bag (2 items)

Sweater

Sweater

1

$65

Hydrogen Frame

Hydrogen Frame

1

$15

Hydrogen Components

Hydrogen UI

Mapped directly to the Storefront API, Hydrogen UI gives you components and hooks like customer accounts, search, and i18n

Four modules are connected with dotted lines to represent the out-of-the-box features offered with the SEO component.

SEO ready

Includes pre-built SEO optimizations like an automatically generated sitemap, metadata values for every page, and a robots.txt file

Two browser windows displaying product detail pages are connected with dotted lines to represent the connection between Shopify&apos;s APIs and Hydrogen storefronts.

Storefront API

Built on top of a set of globally distributed commerce APIs, so you can create what you want with Shopify

Performance

1/3

Caching strategies

Stale-while-revalidate defaults and full-page and sub-request caching APIs optimize the initial load and render components fast

Streaming server-side rendering with Suspense

Streaming server-side rendering with Suspense allows page components to progressively load based on priority without sacrificing page interactivity

Oxygen deployment

Deployed at the edge on Oxygen, Hydrogen storefronts render static and dynamic content faster for performant storefronts worldwide

Developer experience

Shopify CLI

Brand-new Shopify CLI quickly initializes new projects and runs your local development server

...
Two terminal windows demonstrate the built-in linting support by displaying an error message and help documentation.

Linting

Built-in linting with IntelliSense editing support, so writing code is more intuitive with fewer errors

A module with the lightning bolt Vite logo within it represents the Vite plugin.

Vite plugin

A pluggable Vite-powered environment includes instant server starts and scalable Hot Module Replacement

Several stacked modules, including one with the Tailwind CSS logo within it, represent the many CSS libraries that the framework supports.

Built-in CSS Support

Built-in Tailwind CSS support or use the CSS system you prefer

Built-in production hosting

Install the Hydrogen channel and get access to Oxygen deployments

Read Oxygen documentation

Analytics

Performance insights, analytics, and logs for every deployment

A browser window shows how the Hydrogen storefront is included in the Shopfy Admin, including graphs and analytics on the storefront's performance.
Hydrogen logo
Two browser windows, one with the GitHub logo within it, represent how Hydrogen storefronts and GitHub are connected.

GitHub connectivity

Oxygen connects directly to GitHub and uses GitHub Actions to automatically deploy commits, so deployment is as simple as a git push

A module with a graphic that represents a branch and a checkmark demonstrate how deployments can be previewed before they&apos;re made live.

Preview deployments

Every commit gets its own preview deployment, defaulting to private but easily made public

A browser window is surrounded with modules outlined with dotted lines to represent many custom environments.

Custom environments

Tied directly to a branch, custom environments get their own environment variables and a static URL

Hosting alternatives

Compatible with Node.js and Worker runtimes

Floating Hydrogen logo symbols.
Chat icon

Get involved

Hydrogen GitHub

Conversation on the Hydrogen discussion forum

Hydrogen YouTube playlist

Hydrogen and Oxygen development tips and insights

ShopifyDevs Discord

Events and conversation

Shopify Partners blog

Resources about building with Shopify