Adding the Reviews Widget to Shopify
Adding the Reviews Widget to Shopify
Article summary
Did you find this summary helpful?
Thank you for your feedback
The Reviews Widget 3.0 lets you showcase your reviews on your homepage and product pages in a fully customizable format. Each review will appear with a title, review content, and its associated star rating. Our new and improved 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 Reviews Widget to your Shopify store.
Available for:
Merchants using the new version of the Reviews Widget. If you’re using the previous version, see Adding the Reviews Widget.
Workflow
The way you add the Reviews Widget depends on whether you have an existing Yotpo Reviews Widget in your store.
- If you already added the previous version of the Reviews Widget 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 Reviews Widget on your store, follow the flow for adding a new widget
Migrating your existing Reviews Widget
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.
Please note:
If you do choose to continue using your existing widgets, this may prevent you from getting the full performance benefits.
Adding the Reviews Widget
Use the flow below to access the new widget editor:
- From your Yotpo Reviews main menu, go to On-Site Widgets.
- Click Reviews Widget 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 Publish. You will see the scripts you need to add to your store.
Add Yotpo's JavaScript (required)
- In a separate window, log into your Shopify account.
- Go to your Shopify Themes menu.
- Click Actions > Edit Code.
- Locate the file that you use for your layout. This is usually called theme.liquid or theme-template.liquid.
- Copy and paste the following Yotpo script into the top section:
<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/{{app_key}}?languageCode={{ localization.language.iso_code | escape }}" async></script>
Tips:
- 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 Reviews Widget (required)
- Locate the file that manages your basic product page content and settings. This is usually called product.liquid or main-product.liquid.
- Copy and paste the widget itself into the file:
- If you're using Shopify Online Store 2.0, paste the code above the { % schema % } section
- If you're using an older theme, paste the code under the last line of code
Example code:
<div class="yotpo-widget-instance" data-yotpo-instance-id="{{instance_" data-yotpo-product-id="{{product.id}}" data-yotpo-name="{{ product.title | escape }}" data-yotpo-url="{{ shop.url }}{{ product.url }}" data-yotpo-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}" data-yotpo-description="{{ product.description | escape }}"></div>- Click Save.
Next steps
Now you've added the Reviews Widget 3.0, the next step is to add the Star Rating 3.0.
Was this article helpful?
