TapCart Integration

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

Mollie Herbert avatar
Written by Mollie Herbert
Updated this week

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. Customise the widget however you like, then click Get Installation Code (leave the popup 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 this.

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 0px;
}


# 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?