/hydrogen-storefront

Custom Shopify Storefront using Hydrogen framework with React, Tailwind CSS, and Vite (ESM, HMR, SSR).

Primary LanguageJavaScript

Hydrogen Storefront

Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.

screencapture-hydrogen-storefront-4wgq5creb-javigong-vercel-app-2022-09-27-15_53_17

screencapture-hydrogen-storefront-4wgq5creb-javigong-vercel-app-collections-insulated-and-puffy-jackets-2022-09-27-15_54_18

screencapture-hydrogen-storefront-4wgq5creb-javigong-vercel-app-products-the-h2-snowboard-2022-09-27-15_54_42

screencapture-hydrogen-storefront-4wgq5creb-javigong-vercel-app-products-the-h2-snowboard-2022-09-27-15_56_13

screencapture-hydrogen-storefront-4wgq5creb-javigong-vercel-app-products-the-h2-snowboard-2022-09-27-15_55_08

screencapture-checkout-hydrogen-shop-55145660472-checkouts-9577b475119567d571b1fcb9f649d034-2022-09-27-15_55_39

Documentation & Templates

Check out the docs

Run this template in JavaScript on StackBlitz

Run this template in TypeScript on StackBlitz

Getting started

Requirements:

  • Node.js version 16.14.0 or higher
  • Yarn
npm init @shopify/hydrogen@latest --template hello-world-ts

Remember to update hydrogen.config.js with your shop's domain and Storefront API token!

Building for production

yarn build

Previewing a production build

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:

yarn build
yarn preview