Hydrogen templates
Hydrogen offers different templates that provide paths to building Shopify custom storefronts. This guide describes the templates that Hydrogen offers and how you can begin exploring them.
How it works
Anchor link to section titled "How it works"Hydrogen provides the following templates to help you get started:
- Hello World: A minimal template for developers who want to build their Hydrogen storefront from the very beginning. Pick this template to start building from scratch.
- Demo Store: The default template installed when creating a new Hydrogen storefront. It’s a complete Hydrogen storefront that uses live production data provided by Shopify. Pick this template to inspect a working Hydrogen codebase, or to use as a starting point for your own build.
Hello World template
Anchor link to section titled "Hello World template"The Hello World template is a barebones version of a Hydrogen storefront.
The template is available in JavaScript and TypeScript. JavaScript is the default. To use the TypeScript version of the template, pass the --ts flag.
Create a Hydrogen storefront with the Hello World template
Anchor link to section titled "Create a Hydrogen storefront with the Hello World template"
Hello World project structure
Anchor link to section titled "Hello World project structure"The Hello World template provides the following basic structure of a Hydrogen storefront:
Demo Store template
Anchor link to section titled "Demo Store template"The Demo Store template includes demonstration implementations of a homepage, product detail pages, collections, data-fetching, caching strategies, Tailwind integration, and more. It showcases Shopify’s opinionated best practices for building storefronts with Hydrogen, and some advanced features of the framework.
The template is available in JavaScript and TypeScript. JavaScript is the default. To use the TypeScript version of the template, pass the --ts flag.
Create a Hydrogen storefront with the Demo Store template
Anchor link to section titled "Create a Hydrogen storefront with the Demo Store template"
Demo store template features
Anchor link to section titled "Demo store template features"The Demo Store template provides a full purchase journey out-of-the-box and includes the following features:
- End-to-end testing with Playwright
- Unit testing with Vitest and Testing Library
- Code formatting with Prettier
- JavaScript linting with ESLint and the Hydrogen ESLint plugin
Demo Store project structure
Anchor link to section titled "Demo Store project structure"Most of the files that you'll work with in the Demo Store template are located in the /src directory. The /src directory contains the following:
- A set of boilerplate
componentsandroutes - Your app's top-level React component (
App.server.tsx), which includes boilerplate code for the app and routing. This file is also the main entry point for the server. Basic styles provided by Tailwind CSS (
index.css)
The Demo Store template provides a series of components that you can use to accelerate your development process. The components integrate directly with the Storefront API for efficient data-fetching, allowing you to save time on crafting GraphQL queries to interact with Shopify APIs or other third-party data sources.
The Demo Store template includes different categories of components.
The following components render account information:
- AccountActivateForm
- AccountAddressBook
- AccountAddressEdit
- AccountCreateForm
- AccountDeleteAddress
- AccountDetails
- AccountDetailsEdit
- AccountLoginForm
- AccountOrderHistory
- AccountPasswordResetForm
- AccountRecoverForm
The following components render card elements:
The following components render cart elements:
The following components render small chunks of reusable content:
The following components render global elements:
The following components render product information:
The following components render search functionality:
The following components render specific pieces of content on a page:
Additional components
Anchor link to section titled "Additional components"Hydrogen uses file-based routing. Any pages added to the src/routes directory will be automatically registered as routes by the app. The following routes are included in the Demo Store template:
Explore templates
Anchor link to section titled "Explore templates"- Get started with Hydrogen and begin building a custom storefront.
- Learn about Hydrogen's architecture and framework.
- Get familiar with React Server Components.