How to Build a Custom Storefront with Hydrogen

Hydrogen is a React-based framework developed by Shopify. In this article, we'll walk you through the architecture of Hydrogen — whose developer preview became available in the fall of 2021 — what you can do with it today, and what developments are expected in the future.

When building an online store with Shopify, theme customization is probably the most commonly used approach. The release of Dawn in 2021 made it possible to build flexible stores through theme customization alone, but there are several advantages to building a custom storefront using Hydrogen and similar tools:

Download the Store Design Guide for High-Converting Stores (Free)

What Is a Custom Storefront?

• You can build your store using React, which is a leading trend in frontend development
• You can create richer designs and more personalized stores that aren't achievable through Liquid editing or app additions alone

Store development using the Storefront API provided by Shopify has been done before, and headless commerce has become one of Shopify's defining features. Hydrogen can be seen as a tool that makes building headless commerce faster and more efficient than ever.

Hydrogen's Features and Getting Started

Hydrogen is built on three key technologies:

• Tailwind CSS
• React (React Server Components)
• Vite

Many developers with experience in React-based frontend development are likely already familiar with Tailwind CSS for styling. However, if you're not comfortable with React Server Components, it would be worthwhile to deepen your understanding before starting with Hydrogen. Vite is a build tool created by the developer of Vue.js, and enables fast development with features like HMR (Hot Module Replacement).

To get started with Hydrogen, you'll need the following:

• yarn or npm installed
• A development environment running Node v14 or higher
• A development store
• A private app created in that store with access to the Storefront API

The main setup steps are documented on this page, so you can follow the steps in the documentation to get started right away.

Hydrogen's Architecture

Hydrogen is structured around components, hooks, and utilities, each playing a distinct role in enabling custom storefronts.

• components

Like a typical React application, Hydrogen passes the necessary props to each component to dynamically switch what is displayed. There are dedicated components for rendering products, collections, and other items, and cart-related components are used to build the checkout flow.

• hooks

Hooks are responsible for fetching store data via the Storefront API. The data retrieved by each hook is passed to the components and rendered on the screen. Hooks like useShopQuery accept a GraphQL query as an argument, allowing you to retrieve exactly the data you need for display.

• utilities

Utilities provide functions for formatting and displaying data fetched via hooks, as well as helper functions to determine whether code is executing on the client or server side. Using these utility functions enables more efficient development.

What You Can Do Right Now

• Development environment

Unlike themes, there is currently no way to edit code or apply customizations directly from the store admin. Development is done locally. Also, yarn create hydrogen-app generates JSX files by default, so TypeScript support is not included out of the box — if you want to develop with TypeScript, you'll need to configure it yourself.

• Deployment

Shopify recommends Oxygen as the ideal deployment environment for Hydrogen, but since it's still under development, Oxygen is not yet available. In the meantime, you can deploy using platforms like Cloudflare, Heroku, or Google Cloud Run. We tried connecting a GitHub repository and deploying to Heroku without any issues — even completing the checkout flow — so if you want to test a Hydrogen storefront you've built locally in a production environment, it may be worth trying one of these platforms while waiting for Oxygen.

What to Look Forward to

For Hydrogen, two major developments are anticipated: the launch of Oxygen, and no-code customization support. In theme development, Git-based version control and per-branch theme previews are already available. Once Oxygen becomes available for Hydrogen, it may enable versioned deployment environments similar to Vercel, viewable directly from the store admin. Additionally, in Shopify's official Slack, the hydrogen-and-oxygen channel has seen messages from developers working on a customization interface, suggesting that no-code customization of Hydrogen-built stores may become a reality in the future.

StoreHero can support you from the ground up in designing a high-converting store. Feel free to reach out. =>View StoreHero's Service Introduction