Headless in half the time

Shopify’s headless stack that’s engineered for performance and productivity.

See documentation

Watch the overview (2:20)

Build faster with flexible UI components optimized for commerce

Build faster with flexible UI components optimized for commerce

/ABSTRAK

Home Decor

Rhapsody

$45

Mountains

$45

Ethereal

$45

/ABSTRAK

Corals

Sculpture

/ABSTRAK

Your bag

Go from CLI to URL
in minutes

Terminal

➜ Sites npm create @shopify/hydrogen

?Connect to Shopify?Use sample data from Mock.shop (no login required)>Link your Shopify accountPress ↑↓ arrows to select, enter to confirm

?Where would you like to create your storefront?>./ABSTRAK

?Choose a language:>JavaScriptTypescript

?Select a styling library:>TailwindCSS ModulesVanilla ExtractCSSSkip and set up later

?Install dependencies with npm?>YesNo

?The Hydrogen CLI can be called by typing `h2`,
do you want to set up the shortcut?>YesNo

You’ll need to restart your terminal session to make `h2` alias available.

ABSTRAK is ready to build.

?Do you want to scaffold routes and core functionality?>Yes, set up nowNo, set up later (run `h2 setup`)

?Do you want to support multiple markets?>Yes, with subfolders (example.com/fr-ca/...)Yes, with subdomains (de.example.com/...)Yes, with domains (example.jp/...)No, set up later (run `h2 setup markets`)

Storefront setup complete!

Shopify: ABSTRAKStyling: TailwindMarkets: Subfolders: Routes:

Home (/)
Products (/products/:handle)
Collections (/collections/:handle)
Cart (/cart)
Pages (/:handle)
Search (/search)
Policies (/policies & /policies/:handle)
Accounts (/account/*, all account routes)
Robots (/robots.txt)

Help

Guides
API reference
Demo Store code
run `h2 --help`

Next steps

Run `cd ABSTRAK&& h2 dev`

Environment variables injected into mini-oxygenPUBLIC_STOREFRONT_ID from localPUBLIC_STOREFRONT_API_TOKEN from localPUBLIC_STORE_DOMAIN from localSESSION_SECRET from local

Builder setup complete

View ABSTRAK local at http://localhost:3000

GET 200 render /
GET 200 render /product/canvas-sneakers

Hydrogen commerce components with Mock.shop

Go from CLI to URL
in minutes

Trusted by some of the most creative businesses on the web

See showcase

Patta x Tommy
Drake Related
Denim Tears
Baboon to the moon

Hydrogen is built on Remix, the framework from the creators of React Router

Instant Feedback

Optimistic UI enables user actions to feel instantaneous, while the real server requests happen behind the scenes.

Smooth Transitions

Nested routes allow you to only fetch and re-render the stuff that changes, making navigating between pages or filtering collections feel fast and smooth.

Rock-solid Stability

Views render on the server, so you ship less client-side JavaScript to the browser. Meaning faster page loads, with zero time-to-interactive. Worrying about shaky mobile networks is a thing of the past.

Accelerate development with built-in Shopify features critical to conversion

Composable by design. If it has an API, it works with Hydrogen.

Explore Hydrogen compatible apps

Instantly deploy to Oxygen, our built-in global hosting solution

Monitor and debug with log access and drains

Optimize performance with custom cache rules

300+ points of presence around the globe,
hitting 95% of the internet in under 50ms

And it's <Free />;Oxygen is available on all Shopify plans, except Starter, at no extra cost.

Get building

Spin up a new Hydrogen app in minutes.

See documentation

Headless in half the time

Build faster with flexible UI components optimized for commerce

Build faster with flexible UI components optimized for commerce

Go from CLI to URL in minutes

Go from CLI to URL in minutes

Go from CLI to URL in minutes