Using Recharge with Hydrogen Shopify to build custom storefronts

Commerce is constantly evolving. As a developer, you can build commerce integrations in all the places where merchants want to sell, and where their customers want to buy. A custom Shopify storefront separates the customer facing experience from the backend platform infrastructure, offering more flexibility and freedom to create a completely unique experience for customers.

What’s a custom storefront?

custom storefront is an example of a headless commerce model. Headless commerce is an architecture where the frontend and backend of your storefront are independent.

Merchants can use Shopify as the commerce engine behind their independently-built storefront experiences.

Hydrogen is a front-end web development framework used for building Shopify custom storefronts. It includes the structure, components, and tooling you need to get started so you can spend your time styling and designing features that make your brand unique.

Deploying Hydrogen

You can deploy a Hydrogen app to most Worker and Node.js runtimes. This guide describes how to deploy a Hydrogen app to Oxygen, Node.js, Docker, Cloudflare Workers, and Netlify.

Adding Recharge (Subscriptions)

This guide walks you through the Shopify GraphQL Storefront API queries necessary to create a headless experience with Recharge-specific examples. The tutorial highlights extracting relevant data to this workflow, and provides context for how Shopify selling plans correspond to Recharge subscriptions.

Using Hydrogen to add subscriptions to cart:

Use this guide to add the item to the cart with the selling plan passed as an attribute in the Hydrogen AddToCartButton component. See Recharge documentation for more info.

Recharge + Hydrogen