Shopify Hydrogen

Using Nosto's React Component Library built specifically for Shopify Hydrogen
Hydrogen is a powerful React-based framework designed to create custom storefronts on Shopify. We have created a React component library as well as a demo storefront showcasing our solution for implementing Nosto in Hydrogen environments.

Shopify Hydrogen React Component Library

Our component library, specifically tailored to Shopify Hydrogen, utilizes nosto-react under the hood, while adding Hydrogen-specific hooks and logic to simplify Nosto integration.
Developers can easily install our library components via npm into their Hydrogen-based projects to access Nosto's extensive feature set, including recommendations, onsite content personalization, dynamic bundles, pop-ups, and more. Please see below for more details.

Demo Store

Our live demo store is deployed via Oxygen to showcase our integration in action. You can also view the entire codebase for our store on GitHub.

GitHub Repository

For further information about our Shopify Hydrogen-specific extension of nosto-react, please visit our GitHub repository. Our repository contains detailed documentation about how to use the library, as well as other information about how it works.

Supported features

  • Recommendations, including client-side rendering
  • Onsite content personalisation
  • Dynamic bundles
  • Debug toolbar*
  • Pop-ups & personalised emails
  • A/B testing
  • Segmentation and Insights
  • Analytics
  • Search**
*except advanced use cases **when implemented via our code editor

Features not currently supported

  • UGC widgets
  • Advanced use cases of the debug toolbar
  • Dynamic placements*
*learn more here about why the concept of dynamic placements does not apply to Hydrogen environments
We are actively working on achieving 100% compatibility with all Nosto features on Hydrogen.


We welcome any feedback you may have on our React component library or demo storefront. Please do not hesitate to contact us with any questions or concerns.