How do you manually integrate the Product Widget into your Shopify template?

Context

If your theme doesn't support Apps blocks, you'll need to integrate the widget manually, i.e. add/copy the stars script and reviews list directly into your Shopify theme code.

To find out more about the new Shopify documentation: 🔔 Shopify : New integration with Verified Reviews documentation

 

Procedure

You'll find a video at the end of the article explaining how to manually integrate the Shopify Product Widget.

• Log in to your Verified Reviews account to follow the 3 steps:
  1. Setting up and integrating in Shopify
  2. Setting up the product note and integrating it into Shopify
  3. Setting up and integrating the Review List in Shopify

1. Setting up and integrating in Shopify

All you need to do is copy and paste the script as shown in the screenshot above into "theme.liquid" before the </body> tag in the HTML code (if there is already a script, you need to replace it with the new one).
To easily find the script from the old version in the code, you can do a search by clicking on the Ctrl + F keys then entering AWS/PRODUCT_API/tag.min.js"</script>

2. Setting up the product note and integrating it into Shopify

• In Product template liquid look for the NETREVIEWS_PRODUCT_STARS code (if you can't find NETREVIEWS_PRODUCT_STARS, you'll need to add the HTML code below exactly where you want to position this note)
  
  

• You must delete the old line to replace it or just copy and paste <div class="skeepers_product__stars" data-product-id="{{ product.id }}"></div>

3. Setting up the Notice List and integrating it into Shopify

• Still in Product template liquid, look for the code NETREVIEWS_PRODUCT_REVIEWS (if you can't find NETREVIEWS_PRODUCT_REVIEWS, you'll need to add the HTML code below exactly where you want to position the list of reviews).
• Once again, delete the old line to replace it or just copy and paste <div class="skeepers_product__reviews" data-product-id="{{ product.id }}" data-locale=" " data-price="{{ product.price | money_without_currency }}" data-currency="{{ shop.currency }}" data-name="{{ product.title }}" data-url="{{ shop.url }}{{ product.url }}" data-image-url="{{ product | image_url: width: 200 }}"></div>
• ⚠️ All attributes are set except the data-locale=" " attribute, which must be replaced by 
• data-locale="en_US"
• Here is a list of languages, in case you have one that doesn't exist, English will be used: en_US / en_UK / es_ES / pt_BR / pt_PT / it_IT / de_DE