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

In addition to automatic integration, you have the option to manually integrate the Product widget into your Shopify template.

If your theme does not support Apps blocks, you will need to manually integrate the widget, meaning adding/copying the star script and the review list directly into your Shopify theme code.

To learn more about the new Shopify documentation

Procedure 

Preamble: Logging into the Verified Reviews account

1/ Log in to your Verified Reviews account;

2/ Go to Display reviews > Integrate my widgets;

3/ Select the widget you want to integrate (if you haven't created a product widget yet, please follow the next procedure);

4/ Click on the Integrate button at the top right of the screen.

Step 1: Implementation of the Setup script

Simply copy-paste the script as shown in the screenshot above into "theme.liquid" before the </body> tag of the HTML code (if there is already a script, you must replace it with the new one).

 

For easy finding of the script of the old version in the code, you can search by clicking Ctrl + F and then entering AWS/PRODUCT_API/tag.min.js"</script>

 

Step 2: Integration of the Product Rating script 

In Product template liquid, search in the code for NETREVIEWS_PRODUCT_STARS (if you cannot find NETREVIEWS_PRODUCT_STARS, you will need to add the HTML code below to the exact location where you want to position this rating)
You must remove the old line to replace it or just copy-paste <div class="skeepers_product__stars" data-product-id="{{ product.id }}"></div>

 

Step 3: Integration of the Review List script (review block)

Still in Product template liquid, search in the code NETREVIEWS_PRODUCT_REVIEWS (if you cannot find NETREVIEWS_PRODUCT_REVIEWS, you will need to add the HTML code below to the exact location where you want to position the review list)

Once again, remove the old line to replace it or just copy-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 attribute data-locale=" " which must be replaced with data-locale="en_EN"

Here is a list of languages, in case you have one that does not exist, English will be used: en_US / en_UK / es_ES / pt_BR / pt_PT / it_IT / de_DE

Was this article helpful?
0 out of 3 found this helpful