---
title: "Adding the Star Rating 3.0"
slug: "adding-the-star-rating-to-shopify"
tags: ["Shopify", "Shopify Plus", "Reviews "]
updated: 2024-06-02T08:52:19Z
published: 2024-06-02T08:52:19Z
canonical: "support.yotpo.com/adding-the-star-rating-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 Star Rating to Shopify

Products

  

Reviews

###### Supported plans

Free, Starter, Pro, Premium, Enterprise

###### eCommerce Platform

Shopify, Shopify Plus

Star Ratings are a subtle yet effective way to establish buyer trust on any product or category page on your site. The Star Rating reflects the average aggregated rating of a product's published reviews and offers an easy way to link shoppers to read full reviews on your site. Our new and improved Star Rating 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 Star Rating to your store.

> [!NOTE]
> Available for:
> 
> Merchants using the new version of the Star Rating. If you’re using the legacy version, see [this article](/v1/docs/adding-the-star-rating)

## Workflow

The way you add the Star Rating depends on whether you have an existing Yotpo Star Rating on your store.

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

## Migrating your existing Star Rating

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. This option will replace your current widget with the new widget, in the exact same place on your site.

> [!WARNING]
> Please note:
> 
> If you do choose to continue using your existing widgets, this may prevent you from getting the full performance benefits.

## Adding the Star Rating

Use the flow below to access the new widget editor:

1. In your Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets).
2. Click S**tar Rating**.
3. Customize the widget according to your needs. Learn more about [customization options](/v1/docs/customizing-the-star-rating-30-to-shopify)
4. Click **Save changes**.
5. Click **Preview** to preview your changes.
6. When you’re ready to publish, click **Publish.** You can automatically add the widget to your product pages by clicking **Publish now**.

If you want to add the widget to other pages, such as collection pages:

1. Click **View instructions**.
2. Click **Get the code**.
3. Click the relevant page to learn where to add the copied code:

> [!WARNING]
> Please note:
> 
> The following guide contains the most frequently used file and elemant names for implementing Yotpo's features.
> 
> Don't worry if you can't find them or if using them doesn't work. You can either explore the files on your own until you find the right spot, or you can [contact our support team](https://yap.yotpo.com/#/?modal=contact_support) to help you find the way.

**To add the Star Rating widget to your product pages (custom themes)**

1. If you have a custom theme and the automatic publish flow doesn't work with your theme:
2. Locate the file that you use for your product pages. This is usually called *product.liquid*, *product-template.liquid*, or *main-product.liquid*.
3. Paste the widget code into the file:
  - If you're using Shopify **Online Store 2.0**, paste the code under the *<div class="product__info-wrapper grid__item">* element
  - If you're using a **vintage theme**, paste the code under the {*{ product.title }}* element
4. Click **Save**.

**To add the Star Rating widget to your collection pages**

1. Paste the widget code into the relevant file:
  - If you're using Shopify **Online Store 2.0**, paste the code in the *Main-collection-product-grid.liquid* file under the *<li class="grid__item”>* element. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/5b89f71c-8f50-405d-9dbe-16cff4bef4a9.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A17%3A49Z&se=2026-10-31T17%3A17%3A49Z&sr=c&sp=r&sig=aufgUkY9AOkD0flyFnMtq4Ur61V%2F%2BxLOL139H9BAMM8%3D)
  - If you're using **a vinatge theme**, paste the code in the *Collection-template.liquid* file under the *<div class=”grid_item grid_item–{{section.id}} {{ grit_item_width }}”>* element ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/9cd6d999-a604-4baa-ad90-810c18be82c7.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A17%3A49Z&se=2026-10-31T17%3A17%3A49Z&sr=c&sp=r&sig=aufgUkY9AOkD0flyFnMtq4Ur61V%2F%2BxLOL139H9BAMM8%3D)
2. Click **Save**.

**To add the Star Rating widget to your homepage**

1. Paste the widget code into the relevant file:
  - If you're using Shopify **Online Store 2.0**, paste the code in the *Featured-collection.liquid* file under the *<li class="slide-{{ section.id }}-{{ forloop.index }}’ class=”grid_item* element. ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/ae003adc-cf7d-4b80-ab22-4af3b8bea5ad.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A17%3A49Z&se=2026-10-31T17%3A17%3A49Z&sr=c&sp=r&sig=aufgUkY9AOkD0flyFnMtq4Ur61V%2F%2BxLOL139H9BAMM8%3D)
  - If you're using a **vintage theme**, paste the code in the *Collection.liquid* file under the *<li class=”grid_item grid_item–{{section.id}} {{ grit_item_width }}”>* element ![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/659ab885-4dea-4667-98bf-38f74a0dc8b2.png?sv=2026-02-06&spr=https&st=2026-10-31T16%3A17%3A49Z&se=2026-10-31T17%3A17%3A49Z&sr=c&sp=r&sig=aufgUkY9AOkD0flyFnMtq4Ur61V%2F%2BxLOL139H9BAMM8%3D)
2. Click **Save**.

**To add the Star Rating widget to your cart page**

If you're using Shopify **Online Store 2.0**, paste the code in the *main-cart-items.liquid* file under the *<td class=”cart-item_media>* element.

## Related

- [Adding the Reviews Widget to Shopify](/adding-the-reviews-widget-to-shopify.md)
- [Customizing the Star Rating Widget](/customizing-the-star-rating-widget.md)