Skip to main content

Overview

Using Recharge with Hydrogen, Shopify’s headless commerce framework​

Get more out of your existing audience and attract new customers with a subscription offering for your storefront. Hydrogen merchants can now integrate with Recharge for a frictionless subscription experience that can add an extra revenue layer to your business and build brand loyalty through recurring charges. Our integration simplifies subscription management, streamlines the checkout process, and allows you to manage multi-channel commerce options all in one place.

What is Hydrogen and Oxygen?​

Hydrogen is a React-based framework that fast-tracks development for Shopify merchants that want to go headless. It offers components, hooks, and utilities optimized for commerce and preconfigured to work with Shopify’s APIs. Hydrogen stores can be deployed to Oxygen, Shopify’s global hosting solution, at no additional cost. This guide will walk you through the process of creating a storefront, linking it to your shopify store and then deploying it to Oxygen.

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.

Other Recharge x Hydrogen Resources​

Examples​

info

These examples are for the Hydrogen V2 framework.

These examples are based on the Hydrogen's demo store template, but should apply in general to all Hydrogen stores. Routes, folders, filenames maybe be slightly different from one Hydrogen setup to the next.

Different versions of Hydrogen and their templates have different recommendations for what Shopify APIs to use.