---
title: "Using Yotpo Reviews with Shopify Hydrogen"
slug: "using-yotpo-reviews-with-shopify-hydrogen"
tags: ["Reviews ", "eCommerce Integration", "Shopify Hydrogen", "Yotpo Reviews"]
updated: 2025-07-21T12:42:54Z
published: 2025-07-21T12:42:54Z
canonical: "support.yotpo.com/using-yotpo-reviews-with-shopify-hydrogen"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Yotpo Reviews with Shopify Hydrogen

Products

  

Reviews

###### Supported plans

All plans

###### eCommerce Platform

Shopify, Shopify Plus

## Goals and Outcomes

Shopify Hydrogen lets you build custom storefronts with complete design flexibility, and Yotpo Reviews ensures you can showcase customer feedback and star ratings seamlessly within that experience. By integrating the two, you get the best of both worlds: high-performing, personalized storefronts powered by Hydrogen, and trusted review features from Yotpo that drive conversions and build trust.

Requirements:

- A Shopify store
- An active Yotpo Reviews subscription
- A [Shopify Hydrogen](https://hydrogen.shopify.dev/) storefront

In this article, you’ll learn how to use Yotpo Reviews with Shopify Hydrogen.

## Integration Process Overview

### Step 1: Set Up Your Hydrogen Storefront

Start by setting up a Hydrogen storefront. Use these Shopify resources for reference:

- [Create a custom storefront with Hydrogen](https://shopify.dev/docs/storefronts/headless)
- [Customize a storefront with Hydrogen](https://shopify.dev/custom-storefronts/hydrogen/getting-started/start-building)
- [Build product pages](https://shopify.dev/docs/storefronts/headless/getting-started/build-options)
- [Hydrogen conceptual docs](https://shopify.dev/docs/storefronts/headless/hydrogen/fundamentals)
- [Hydrogen reference docs](https://shopify.dev/api/hydrogen)

### Step 2: Connect Your Storefront to Yotpo Reviews

To display Yotpo reviews and ratings on your store, follow these steps:

1. **Add the JavaScript Library code** – Insert Yotpo’s core script into your site's <head> tag to enable widgets.
2. **Install the** [**Reviews Widget**](https://support.yotpo.com/v1/docs/adding-the-reviews-widget) – Add the main widget code to your product pages to show customer reviews and star ratings.
3. **Add the** [**Star Rating**](https://support.yotpo.com/v1/docs/adding-the-star-rating) – Display average product ratings near product descriptions, with a link to full reviews.
4. **Optional: Add More Widgets** – Customize your storefront further with additional widgets like [Smart Filters](https://support.yotpo.com/v1/docs/reviews-widget-smart-filters), [Review Highlights](https://support.yotpo.com/v1/docs/review-highlights), and [Promoted Products](https://support.yotpo.com/docs/adding-promoted-products-to-your-store).
5. **Set Up Conversion Tracking** – Add a tracking script to your order confirmation page to measure how reviews impact sales.

For a more detailed setup, see [Integrating your storefront](https://support.yotpo.com/docs/generic-other-platforms-installing-yotpo-reviews-v3#integrating-your-storefront).

> [!TIP]
> Tip
> 
> For more flexibility and better performance, we recommend using Yotpo Reviews' [Storefront APIs](https://apidocs.yotpo.com/reference/about-storefront-reviews) to fetch and display review data dynamically within your Hydrogen components.
> 
> Alternatively, if your Hydrogen storefront employs client-side navigation or dynamic content loading (e.g., infinite scroll, quick view modals), you can use [Yotpo's AJAX](https://support.yotpo.com/docs/loading-yotpo-with-ajax) method to reinitialize widgets after content updates. This approach ensures that reviews and ratings are correctly displayed without requiring full page reloads.

Learn more in [Yotpo’s Headless Integration Guide (API-based)](https://apidocs.yotpo.com/docs/yotpo-headless-integration-guide-api-based).