Adding the Star Rating to Shopify
Adding the Star Rating to Shopify
Article Summary
Share feedback
Thanks for sharing your feedback!
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.
Available for:
Merchants using the new version of the Star Rating. If you’re using the previous version, see this article
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
- If you don’t already have the Star Rating on your store, follow the flow for adding a new widget
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 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.
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:
- In your Yotpo Reviews main menu, go to On-Site Widgets.
- Click Star Rating 3.0.
- Customize the widget according to your needs. Learn more about customization options
- Click Save changes.
- Click Preview to preview your changes.
- When you’re ready to publish, click Go live - You will now see the scripts you need to add to your store.
Add Yotpo's JavaScript (required)
Please note:
If you have already added the Reviews Widget 3.0, you can skip this step.
- In a separate window, log into your Shopify account.
- Go to your Shopify Themes menu.
- Click Actions > Edit Code.
- Locate your theme.liquid file.
- Copy and paste the following Yotpo script into the top section:
<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/{{app_key}}" async></script>Important:- 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
- If you’re migrating your existing widget, you can easily locate the script and div by searching the file for Yotpo.
- Click Save.
Install the Star Rating
Copy the following widget code:
<div class="yotpo-widget-instance" data-yotpo-instance-id="#INSTACE_ID#" data-yotpo-product-id="{{product.id}}" data-yotpo-cart-product-id="{{item.product.id}}" data-yotpo-section-id="{{template.name}}"></div>
To add the Star Rating widget to your product pages (required)
- Locate the file that you use for your product pages. This is usually called product.liquid, product-template.liquid, or main-product.liquid.
- 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
- Click Save.
To add the Star Rating widget to your collection pages
- 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.
- 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
- 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.
- Click Save.
To add the Star Rating widget to your homepage
- 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.
- 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
- 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.
- 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.
Was this article helpful?
