Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework. This template contains a minimal setup of components, queries and tooling to get started with Hydrogen.

Check out Hydrogen docs Get familiar with Remix

• Remix
• Hydrogen
• Oxygen
• Shopify CLI
• ESLint
• Prettier
• GraphQL generator
• TypeScript and JavaScript flavors
• Minimal setup of components and routes

Requirements:

• Node.js version 16.14.0 or higher

npm create @shopify/hydrogen@latest

npm run build

npm run dev

1. Setup a ngrok account and add a permanent domain (ie. https://<your-ngrok-domain>.app).
2. Install the ngrok CLI to use in terminal
3. Start ngrok using ngrok http --domain=<your-ngrok-domain>.app 3000

1. Go to your Shopify admin => Hydrogen or Headless app/channel => Customer Account API => Application setup
2. Edit Callback URI(s) to include https://<your-ngrok-domain>.app/account/authorize
3. Edit Javascript origin(s) to include your public domain https://<your-ngrok-domain>.app or keep it blank
4. Edit Logout URI to include your public domain https://<your-ngrok-domain>.app or keep it blank

Run npx shopify hydrogen link or npx shopify hydrogen env pull to link this app to your own test shop.

Alternatly, the values of the required environment varaibles "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.

🗒️ Note that mock.shop doesn't supply these variables automatically.