# Shopify Hydrogen [Hydrogen](https://hydrogen.shopify.dev) 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](https://github.com/Nosto/shopify-hydrogen), specifically tailored to Shopify Hydrogen, utilizes [nosto-react](https://github.com/Nosto/nosto-react) under the hood, while adding Hydrogen-specific hooks and logic to simplify Nosto integration. We now also support Hydrogen version 2 which is [built on Remix](https://hydrogen.shopify.dev/updates). Our [main](https://github.com/Nosto/shopify-hydrogen/tree/main) branch is dedicated to version 2, while the legacy version 1 is present on the [hydrogen-v1](https://github.com/Nosto/shopify-hydrogen/tree/hydrogen-v1) branch. Developers can easily install our library components via [npm](https://www.npmjs.com/package/@nosto/shopify-hydrogen) 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. There are two tags maintained on NPM. The `latest` version will follow`2.x.x`, while the `legacy` has version `1.x.x` to separate Hydrogen version 1 and version 2. ### Demo Store Our [live demo store](https://shopify-hydrogen-demo.nosto.com/) is deployed via Oxygen to showcase our integration in action. You can also view the entire codebase for our store [on GitHub](https://github.com/Nosto/shopify-hydrogen-demo). This store is built on Remix using the latest version of the library. ### GitHub Repository For further information about our Shopify Hydrogen-specific extension of nosto-react, please visit our [GitHub repository](https://github.com/Nosto/shopify-hydrogen). Our repository contains detailed [documentation](https://nosto.github.io/nosto-react/) about how to use the library, as well as other information about how it works. ### Supported features * Search * Category Merchandising * Recommendations, including client-side rendering * Content Personalisation * Dynamic Bundles * Personalized Emails * Pop-Ups * A/B Testing * Segmentation & Insights * Analytics ### Features not currently supported * Visual UGC * Advanced use cases of the debug toolbar * Dynamic placements\* \*learn more [here](https://github.com/Nosto/shopify-hydrogen/blob/main/README.md#warning-dynamic-placements-and-shopify-hydrogen) about why the concept of dynamic placements does not apply to Hydrogen environments {% hint style="warning" %} We are actively working on achieving 100% compatibility with all Nosto features on Hydrogen. {% endhint %} ### Feedback 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.nosto.com/shopify/features/shopify-hydrogen.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.