Shopify: Installing the Yotpo Star Rating on Product Pages

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

<div class="yotpo bottomLine"
data-product-id="{{ product.id }}">
</div>

5. Click Save.

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:

{%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.

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

<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: