Skip to main content

Hydrogen templates

tip

Hydrogen 2.0 is out now. These archival Hydrogen 1.0 docs are provided only to assist developers during their upgrade process. Please migrate to Hydrogen 2.0 as soon as possible.

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​

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.

Components​

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.

Account​

The following components render account information:

Cards​

The following components render card elements:

Cart​

The following components render cart elements:

Elements​

The following components render small chunks of reusable content:

Global​

The following components render global elements:

Product​

The following components render product information:

The following components render search functionality:

Sections​

The following components render specific pieces of content on a page:

Additional components​

Routes​

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: