2023.10

This example is for "@shopify/hydrogen": "~2023.10.x" and uses the Shopify Storefront API for authenticating your customers.

This version of the demo store template is no longer available. If you are just starting out please use the 2024.7 example.

The rest of the documentation assumes your Hydrogen app is already setup and connected to your store. For more information on setting up your developer environment and doing the initial setup with Hydrogen please see their Hydrogen docs and Getting started.

📄️ Setup

There are a few configuration things to setup when using the Recharge JavaScript SDK with Hydrogen. This page with guide you through them.

📄️ Initialization

We recommend only using the JavaScript SDK from the server context of a Hydrogen app. You can initialize the Recharge SDK from the server.ts file in the root directory of your Hydrogen app so the rest of your app can take advantage of the single initialization.

📄️ Authentication & Session

To authenticate customers with the Recharge JavaScript SDK you will need to do it after customers authenticate with Shopify. It is recommended to piggy-back on the Shopify login APIs and use Shopify's session for storing the Recharge session. You can also clear the session on logout.

📄️ Data Fetching

When fetching data via the Recharge JavaScript SDK in Hydrogen we recommend always fetching data within a loader/action.

📄️ Oxygen/Cloudflare Deployments

As mentioned in Initialization, if deploying your Hydrogen app to Oxygen (which is a Cloudflare Worker environment) you will need to update your remix.config.js file with some additional settings. Add the following options to your configuration file: