Requirements
⭐️ Active REVIEWS.IO Account
✅ Shopify Account
🛒 TapCart App
Instructions ⚙️
In the REVIEWS.IO dashboard, go to Publishing >> Widget Library and select the Product Reviews Widget
Customize the widget however you like, then click Get Installation Code (leave the pop-up open for now)
In a new tab, go to your TapCart App within Shopify.
In TapCart, go to App Studio >> Product Page and then click Custom Blocks >> Launch Blocks Editor.
Give your new custom block a name, such as Product Reviews
From the REVIEWS.IO tab, copy the first two lines of the widget code and paste this into the HTML section in TapCart, overwriting what’s already there
From the REVIEWS.IO tab, copy the remainder of the widget code and paste this into the JS section in TapCart. You will need to remove the wrapping
<script></script>tags.
In the script tab, replace the line below -
sku: '[Multiple SKUs Seperated by Semi-Colons e.g "sku1;sku2;" ]',
withsku: Tapcart.variables.product.variants.map(v => v.sku).join(';'),In the CSS section in TapCart, paste the following code, overwriting what’s already there
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Helvetica;
}
#ReviewsWidget {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
9. Click Save and Close to exit the blocks editor.
10. You can now drag your custom block into your product page.
Rating Snippet
If you want to install the rating snippet, you will also need to create a custom block for it.
Within the HTML section, add the following code:
<script src="https://widget.reviews.co.uk/rating-snippet/dist.js"></script>
<div id="ruk_rating_snippet" class="ruk_rating_snippet"></div>
Within CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Helvetica;
}
h1 {
margin: 10px 0;
}
#ruk_rating_snippet {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
#reviews_fade {
padding-left: 20px;
padding-right: 20px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
aspect-ratio: 1;
}
& the JS:
document.getElementById('ruk_rating_snippet').setAttribute(
'data-sku',
Tapcart.variables.product.variants.map(v => v.sku).join(';')
);
ratingSnippet("ruk_rating_snippet", {
store: "[STORE_ID]",
mode: "default",
color: "#0E1311",
linebreak: false,
text: "Reviews",
singularText: "Review",
lang: "en",
usePolaris: true,
showEmptyStars: false,
});