Skip to main content
TapCart Integration

Drag & drop our Product Reviews Widget onto your Shopify store using TapCart Custom Blocks.

Mollie Herbert avatar
Written by Mollie Herbert
Updated over 5 months ago

Requirements

⭐️ Active REVIEWS.IO Account

✅ Shopify Account

🛒 TapCart App


Instructions ⚙️

  1. In the REVIEWS.IO dashboard, go to Publishing >> Widget Library and select the Product Reviews Widget

  2. Customize the widget however you like, then click Get Installation Code (leave the pop-up open for now)

  3. In a new tab, go to your TapCart App within Shopify.

  4. In TapCart, go to App Studio >> Product Page and then click Custom Blocks >> Launch Blocks Editor.

  5. Give your new custom block a name, such as Product Reviews

  6. 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

  7. 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.

  8. In the script tab, replace the line below -

    sku: '[Multiple SKUs Seperated by Semi-Colons e.g "sku1;sku2;" ]',
    with

    sku: Tapcart.variables.product.variants.map(v => v.sku).join(';'),

  9. 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,
});
Did this answer your question?