Overview
Deprecated - Hydrogen 1.0
This documentation is for the legacy @rebuy/rebuy-hydrogen package (Hydrogen 1.0). For new projects, use the Headless SDKs which support Hydrogen 2.0 with modern TypeScript-first APIs.
Rebuy + Hydrogen¶
Rebuy + Hydrogen package is a web development framework used for building Shopify custom storefronts. It includes providers, components, and tooling you need to get started so you can spend your time creating intelligent shopping experiences.
Rebuy + Hydrogen 2¶
Rebuy makes it incredibly easy to bring powerful personalized product recommendations and smart search to your Shopify Hydrogen 2.0 Storefront. For Hydrogen 2.0, we recommend using our new Headless SDKs which provide modern TypeScript-first integrations with React components and server-side rendering support.
How Rebuy + Hydrogen Works¶
Rebuy + Hydrogen is a lightweight framework for creating personalized shopping experiences that are lightning-fast. The framework is composed of:
- Providers - these components build contextual objects that are used during network calls.
- Containers - these components get personalized data from Rebuy and pass the resulting information to children components via props.
- Components - these components can be used to render various merchandising UI.
- Events - these components automatically track user behaviors.
Data Sources¶
Rebuy + Hydrogen is powered by Rebuy's Data Sources, which allows for AI-powered product recommendations, custom defined rulesets, or mixture of human and computer derived output. Data Sources are created in Rebuy's App Admin, and the data source URL is used in your Hydrogen project. Separating the logic from the codebase allows non-technical team members to manage the merchandising rules without the need for costly code changes or redeployments.
User Interfaces¶
Rebuy + Hydrogen uses a React container pattern to separate the data fetching logic and state management from the presentational components. As such, container components do not render user interface elements. They simply pass their own properties — as well as data received from Rebuy — to their children components for consumption. This allows you to build your own user interface with your existing components, or use Rebuy's out of the box components to get up and running quickly.
Getting Started¶
Let's get started!
--- title: Overview excerpt: Build personalized shopping experiences with Rebuy + Hydrogen framework deprecated: true hidden: false metadata: title: '' description: '' robots: noindex next: description: '' pages: - type: endpoint slug: shopify-hydrogen-getting-started title: Getting Started --- !!! warning "Deprecated - Hydrogen 1.0" This documentation is for the legacy `@rebuy/rebuy-hydrogen` package (Hydrogen 1.0). For new projects, use the [Headless SDKs](headless-sdk-overview.md) which support Hydrogen 2.0 with modern TypeScript-first APIs. ## Rebuy + Hydrogen [Rebuy + Hydrogen](https://www.npmjs.com/package/@rebuy/rebuy-hydrogen) package is a web development framework used for building Shopify custom storefronts. It includes providers, components, and tooling you need to get started so you can spend your time creating intelligent shopping experiences. ## Rebuy + Hydrogen 2 Rebuy makes it incredibly easy to bring powerful personalized product recommendations and smart search to your Shopify Hydrogen 2.0 Storefront. For Hydrogen 2.0, we recommend using our new [Headless SDKs](headless-sdk-overview.md) which provide modern TypeScript-first integrations with React components and server-side rendering support. ## How Rebuy + Hydrogen Works Rebuy + Hydrogen is a lightweight framework for creating personalized shopping experiences that are lightning-fast. The framework is composed of: 1. **Providers** - these components build contextual objects that are used during network calls. 2. **Containers** - these components get personalized data from Rebuy and pass the resulting information to children components via props. 3. **Components** - these components can be used to render various merchandising UI. 4. **Events** - these components automatically track user behaviors. ### Data Sources Rebuy + Hydrogen is powered by [Rebuy's Data Sources](https://help.rebuyengine.com/en/collections/3401117-data-sources), which allows for AI-powered product recommendations, custom defined rulesets, or mixture of human and computer derived output. Data Sources are created in Rebuy's App Admin, and the data source URL is used in your Hydrogen project. Separating the logic from the codebase allows non-technical team members to manage the merchandising rules without the need for costly code changes or redeployments. ### User Interfaces Rebuy + Hydrogen uses a React container pattern to separate the data fetching logic and state management from the presentational components. As such, container components do not render user interface elements. They simply pass their own properties — as well as data received from Rebuy — to their children components for consumption. This allows you to build your own user interface with your existing components, or use Rebuy's out of the box components to get up and running quickly. ### Getting Started Let's [get started](shopify-hydrogen-getting-started.md)!