What is Hydrogen
Hydrogen is a React-based JavaScript framework developed by Shopify. Described as a “Framework for Dynamic Commerce”, using Shopify’s Hydrogen gives you the ability to build and deliver fast, personalized shopping experiences.
Explore the official documentationview the repoview the repo to get started with your next Hydrogen project.
To get started with a new Hydrogen app, simply run the CLI:
npx create-hydrogen-app
Why use Hydrogen
Hydrogen allows for faster, personalized online shopping experiences by integrating React Server Components, smart caching, and streaming server-side rendering - unlocking fast first-renders and progressive hydration.
When paired with the globally distributed Shopify GraphQL Storefront API and commerce components, it’s a blazingly fast framework.
Hydrogen provides better builds with hot reloading, built-in ESM, and a dev environment powered by Typescript, Vite, and TailwindCSS.
View Hydrogen in action by exploring Shopify’s implementation.
Headless CMS for Hydrogen Apps
Why use a Headless CMS for hydrogen projects? Often companies want to combine the capabilities of a Headless CMS or a Content API with the eCommerce functionality that Shopify offers.
When handling product inventories and global shopfronts with Shopify, your content needs to be served equally fast. Hygraph provides you with instant GraphQL Content APIs for GraphQL Queries and GraphQL Mutations, making it an incredibly performant combination with Shopify’s globally distributed APIs.
Working with Shopify and Hygraph
Its easy to use Hygraph as a Shopify Headless CMS by integrating Shopify with UI Extensions.
UI Extensions allow you to extend the functionality of the Hygraph content editing experience by running custom applications within the CMS. UI Extensions can be used for a variety of use-cases, such as adding custom fields to let editors search and pick products from a Shopify catalog. Hygraph, GraphQL, and Shopify are a powerful combination for high-performance eCommerce platforms.
With your frontend powered by Hydrogen and Hygraph, make it easier for your content team by setting up a UI Extension within Hygraph to pick Shopify products.
Use our Shopify UI Extension example to create your own.
All you’d need are an index.tsx and a picker.tsx to create your own UI Extenion, and once you have it hosted, you can load your UI Extension into Hygraph.