---
title: "Adding the Reviews Widget 3.0"
slug: "adding-the-reviews-widget-to-shopify"
tags: ["Reviews ", "Shopify", "Shopify Plus"]
updated: 2025-05-12T14:17:14Z
published: 2025-05-12T14:17:14Z
canonical: "support.yotpo.com/adding-the-reviews-widget-to-shopify"
---

> ## 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.

# Adding the Reviews Widget to Shopify

Products

  

Reviews

###### Supported plans

Free, Starter, Pro, Premium, Enterprise

###### eCommerce Platform

Shopify, Shopify Plus

## Goals and Outcomes

The Reviews Widget 3.0 lets you showcase your reviews on your homepage and product pages in a fully customizable format. Each review will appear with a title, review content, and its associated star rating. Our new and improved widget is quick to set up, offers even more customization options to match your brand, and loads at lightning speed.

In this article, you'll learn how to add the new Reviews Widget to your Shopify store.

> [!NOTE]
> Available for:
> 
> Merchants using the new version of the Reviews Widget. If you’re using the previous version, see [Adding the Reviews Widget](/v1/docs/adding-the-reviews-widget).

## Workflow Overview

The way you add the Reviews Widget depends on whether you have an existing Yotpo Reviews Widget in your store.

- If you already added the previous version of the Reviews Widget to your store and now want to upgrade to the new version, follow the flow for [migrating a widget](/v1/docs/adding-the-reviews-widget-30#migrating-your-existing-reviews-widget)
- If you don’t already have the Reviews Widget on your store, follow the flow for [adding a new widget](/v1/docs/adding-the-reviews-widget-30#adding-the-reviews-widget)

## Migrating Your Existing Reviews Widget

If you're an existing customer and you want to migrate your reviews to the new widget, please reach out to [Yotpo Support](https://reviews.yotpo.com/#/?modal=contact_support) so they can help you replace all existing Yotpo Reviews scripts with the new scripts shown below.

Note

If you do choose to continue using your existing widgets, this may prevent you from getting the full performance benefits.

## Adding the Reviews Widget

Use the flow below to access the new widget editor:

1. From your Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets).
2. Click **Reviews Widget 3.0**.
3. Customize the widget according to your needs. Learn more about [customization options](/v1/docs/adding-the-reviews-widget-30-1)
4. Click **Save changes**.
5. Click **Preview** to preview your changes.
6. When you’re ready to publish, click **Publish.** You will see the scripts you need to add to your store.

### Add Yotpo's JavaScript (required)

1. In a separate window, log into your Shopify account.
2. Go to your **Shopify Themes** menu.
3. Click **Actions** > **Edit Code**.
4. Locate the file that you use for your layout. This is usually called **theme.liquid** or **theme-template.liquid**.
5. Copy and paste the following Yotpo script into the top section:

```javascript
<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/{{app_key}}?languageCode={{ localization.language.iso_code | escape }}"  async></script>
```

**Tips**

- Replace the **{{app_key}}** portion of the text in the code above with your store's Yotpo app key. To learn how to find your app key, see [Finding your Yotpo App Key and Secret Key](/v1/docs/finding-your-yotpo-app-key-and-secret-key)
- If you’re migrating your existing widget, you can easily locate the script and div by searching the file for Yotpo.
- If you want the JavaScript to run only on certain pages, place it in a specific template file (e.g., **product.liquid** or **collection.liquid**) instead of the theme file. The code will then only run on those pages.

1. Click **Save.**

### Install the Reviews Widget (required)

1. Locate the file that manages your basic product page content and settings. This is usually called **product.liquid** or **main-product.liquid**.
2. Copy and paste the widget itself into the file:

- If you're using Shopify Online Store 2.0, paste the code above the { % schema % } section
- If you're using an older theme, paste the code under the last line of code

**Example code:**

```javascript
<div class="yotpo-widget-instance" data-yotpo-instance-id="{{instance_" data-yotpo-product-id="{{product.id}}" data-yotpo-name="{{ product.title | escape }}" data-yotpo-url="{{ shop.url }}{{ product.url }}" data-yotpo-image-url="{{ product.featured_image | product_img_url:"large" |replace: '?', '%3F' | replace: '&','%26'}}" data-yotpo-description="{{ product.description | escape }}"></div>
```

1. Click **Save.**

## How to Uninstall the Reviews Widget

To remove the Reviews Widget from your Shopify store, follow these steps:

1. Log in to your Shopify admin.
2. Go to **Online Store** > **Themes**.
3. Find your active theme and click the **··· (three dots)** menu, then select **Edit Code**.
4. In the code editor, use **Ctrl+F** (or **Cmd+F** on Mac) to search for “Yotpo.”
5. Locate the Yotpo-related code in your theme files.
6. Either:
  - **Comment out** the code by wrapping it in `&lt;!--` and `--&gt;`, or
  - **Delete** the code entirely.
7. Click **Save** to apply your changes.

**Alternative method:** You can also uninstall the widget through the theme editor:

- Click **Customize** instead of the three dots.
- Navigate to the section where the Yotpo Reviews Widget app block is added.
- Remove the app block from the page layout.

## Next Steps

Now you've added the Reviews Widget 3.0, the next step is to [add the Star Rating 3.0](/v1/docs/adding-the-star-rating-30).

## Related

- [Adding Yotpo Reviews Widgets to BigCommerce Stencil](/adding-widgets-to-bigcommerce-stencil.md)
- [Adding Yotpo Reviews Widgets to Adobe Commerce](/adding-widgets-to-adobe-commerce.md)
- [Adding Yotpo Reviews Widgets to WooCommerce](/adding-widgets-to-woocommerce.md)
- [Adding the Star Rating to Shopify](/adding-the-star-rating-to-shopify.md)
- [Adding the Q&A Widget to Shopify](/adding-the-qa-widget-to-shopify.md)