---
title: "Shopify: Installing the Yotpo Star Rating on Product Pages"
slug: "shopify-installing-the-yotpo-star-rating-on-product-pages"
tags: ["Reviews ", "Shopify", "Shopify Plus"]
updated: 2025-04-28T15:56:36Z
published: 2025-04-28T15:56:36Z
canonical: "support.yotpo.com/shopify-installing-the-yotpo-star-rating-on-product-pages"
---

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

# Shopify: Installing the Yotpo Star Rating on Product Pages

Products

  

Reviews

###### Supported plans

Free, Starter, Pro, Premium, Enterprise

###### eCommerce Platform

Shopify, Shopify Plus

The Yotpo Star Rating presents an aggregated Star Rating for your products.

Installing the Star Rating is a slightly more complex process than installing the regular widget, because it is up to you where to place it.

## Installing Star Rating on Shopify

The instructions below are for Shopify's default settings.

1. Go to your [Shopify Themes menu](https://www.shopify.com/admin/themes).
2. Click **Actions** > **Edit Code**.
3. Locate the file that you use for your product pages. This is usually called **product-template.liquid** or **main-product.liquid**.
4. Paste the following 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 an older theme, paste the code under the {{ product.title }} element

```markdown
<div class="yotpo-widget-instance" 
data-yotpo-instance-id="###INSTANCE_ID###" 
data-yotpo-product-id="{{product.id}}" 
data-yotpo-cart-product-id="{{item.product.id}}" 
data-yotpo-section-id="{{template.name}}">
</div>
```

5. Click **Save**.

**Please note:**

- The data-product-id attribute only supports alphanumeric (a...z, A...Z, 0...9) and "_" and "-" symbols
- The {{product.id}} variable might differ from theme to theme

## Installing Star Rating on Shopify (sites using the "Clean" theme)

1. Go to the template editor and look for a file named "product-list-repeatable-item.liquid" it's located at the snippet folder
2. Locate the following line in that file: **<p class="title"><a href="{{ producturl }}">{{ product-list-repeatable-item.title }}</a></p>**
3. Add the following code after that line:

```plaintext
{%unless template contains 'product'%}
       {% include 'yotpoBottomLine' with product-list-repeatable-item %}
      {%endunless'%}
```

## Centering the Star Rating on Product Pages

The Star Rating is aligned to the left by default. If your product description is centered, you may want to center the Star Rating as well.

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/10659009-2860-4378-a568-3b60e6ca088b.png?sv=2026-02-06&spr=https&st=2026-10-31T18%3A17%3A59Z&se=2026-10-31T19%3A17%3A59Z&sr=c&sp=r&sig=kTrSEpth56EKfO18xzWPcpk9Hyd95lBWfKLpfgCST28%3D)

If you would like the Star Rating to be centered, please use the following code instead:

```markdown
<div style="text-align:center">
    <div class="yotpo bottomLine" style="display:inline-block"
       data-product-id="{{ product.id }}">
    </div>
</div>
```

After implementing the code, it should look like this:

![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/6b720c32-3350-42b0-bf63-6aea48c0915f.png?sv=2026-02-06&spr=https&st=2026-10-31T18%3A17%3A59Z&se=2026-10-31T19%3A17%3A59Z&sr=c&sp=r&sig=kTrSEpth56EKfO18xzWPcpk9Hyd95lBWfKLpfgCST28%3D)