Adding the Star Rating to Shopify
Adding the Star Rating to Shopify
Article summary
Did you find this summary helpful?
Thank you for 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 legacy 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.
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 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:
Click View instructions.
Click Get the code.
Click the relevant page to learn where to add the copied code:
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 to help you find the way.
To add the Star Rating widget to your product pages (custom themes)
If you have a custom theme and the automatic publish flow doesn't work with your theme:
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
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
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?
