Requirements
⭐️ REVIEWS.IO Account
✅ Shopify Account
💎 GemPages App
Instructions ⚙️
Defining the SKU
Firstly, add the following code to theme.liquid just above the GemPages footer scripts. This will allow the widgets you define within GemPages to pull through the relevant SKUs that are present on the product pages.
<script>
const reviewsIoSku = "###{{ product.variants | map: 'sku' | join: ';' }};###{{ product.variants | map: 'id' | join: ';' }}";
</script>
Product Review Widget 🛍
Within GemPages add a new liquid block where you'd like the widget to display on your site 👇
Then go to REVIEWS.IO and head to the widget library, make any changes to your widget and copy the first two lines:
<script src="https://widget.reviews.io/polaris/build.js"></script>
<div id="ReviewsWidget"></div>
Once you have this code copied, you need to delete the prefilled text within the "Template" tab of the liquid block you added & paste in the lines you copied in the step above.
After this, go back to the widget editor and copy the rest of the code between the <script> & </script> tags.
Within GemPages change to the Script tag, and paste in the rest of the code that you've copied from the widget editor
You will then need to locate the SKU value within the Script for the widget and replace it with:
sku: reviewsIoSku,
Rating Snippet ⭐️
Firstly, you'll need to add a new liquid block onto the site, and place it where you'd like it to display on the site
Then, within the REVIEWS.IO dashboard, navigate to the widget editor and select the rating snippet, and make any style changes you'd like. Make sure that you have changed the platform type to Shopify within the general settings. Copy the first set of code that you are provided
This code then needs to be pasted into the liquid block that you have created & save this
Navigate back to the REVIEWS.IO dashboard and copy the second set of code that you are provided
Once you have this copied, you'll need to go to the Shopify theme editor and paste this code into the footer, or theme.liquid file, of your site.
When you view the live site, you will now see the new rating snippet on your product pages.