Hydrogen -What is Headless Commerce that realizes the front -end development efficiency of the EC site?


What is Headless Commerce?

What is Headless Commerce?

Headless commerce is a mechanism that allows the front -end to the front end of the EC site to achieve the softening and efficiency of front -end development.

The following digital steering front can be built by the store front and backends separated.

  • Social media

  • Mobile app

  • Smart mirror

  • Self -Service Kiosk

  • vending machine

  • Voice assist technology (Amazon Alexa, etc.)

  • Wearable device


HYDROGEN is a framework for building SHOPIFY with React as "head" headless commerce. It was announced at Shopify Unite 2021.

When building the front of an EC site in SHOPIFY, you will basically select a free theme and a paid theme to build a store. Building the front end (Liquid) on SHOPIFY allows you to build a store on the SHOPIFY server.

If you do not need any special features such as a mobile app as described above, that is enough, but if you want to provide advanced CX (customer experience), use Hydrogen to provide highly personalized CX to your customers. It is possible.

Features of HYDROGEN

1. Platform made for commerce

HYDROGEN is a platform made for commerce. LP, cart, and check -out are fully supported. It works on SHOPIFYAPI, as well as the SEO optimization (automatic site map generation, metafield values ​​of each page, Robots.txt file), as well as in SHOPIFYAPI, and realizes what you want to do in SHOPIFY.

2. Efficient development

With Shopify CLI, set up a new project immediately. It is possible to develop efficiently in the local development environment.

In addition, CSS libraries such as Tailwind, CSS Modules, PostCSS are supported as standard. The embedded Linting and Intellisense Edit support allows you to find the efficiency of coding and errors early.

3. Advanced personalization

By using Hydrogen, you can provide advanced personalization to customers. Especially recommended for companies that want to develop products with multiple channels.

For example, it is possible to advertise products advertised online with mobile apps and social media. Financial advertising according to your customers will be possible.

Comparison table

Compare conventional Shopify and Hydrogen. Both the front end and the back end can build a more flexible store.
* Oxygen is a platform recommended by SHOPIFY to deploy Hydrogen.

Comparison table

Companies that adopted HYDROGEN



Allbirds sells wool shoes. It provides multiple silhouettes, sells in more than 35 countries, and has multiple variations. As the assortment of products changed over time, it was necessary to manage the stock status of different products, different categories, multiple variations, and countries. It was necessary to expand the personalized customer experience while realizing a high -speed site display. ALLBIRDS has decided to pursue headless commerce flexibility to continue services to stores and customers around the world.
ALLBIRDS realized headless with iOS apps in 2020. I decided to try Hydrogen to build a new store search function. After reviewing the documentation, planning, planning components, analysis, and testing, the team launched the store search function in three and a half weeks. The next goal is to set the product page to Hydrogen.


Kamp Grizzly


TREMAINE EMORY, an artist and designer, was aiming to renew his apparel brand Denim Tears website. I wanted to make a site with a sense of immersion with the top page, details page, and the entire site. In order to realize such an expression, we decided to build a site with headless commerce. Using HYDROGEN and OXYGEN, we have built an interactive but responsive and high -performance site. Design many elements, such as a collage on the top page, an abstract grid design, and a museum -style product details page.

Denim Tears

One -stop offered from EC construction to advertising operation.