This article is also available in:
This article will guide you on how to add product reviews to your online store using Power Up Script.

In this article

A. Add number of ratings and reviews under product title
B. Add customer's reviews under product description

In the scripts below, ShopBase has prepared 9 sample reviews, you can replace these sample reviews with other links from Loox as instructed in part B of this article.

To add Power Up Script to your product page, from ShopBase admin site, go to Online store > Preferences > Additional Scripts > Head as guided in this article.



A. Add number of ratings and reviews under product title

You can edit 2 values ​​to change the number of ratings and reviews by editing the 2 variables: point and reviewsCount, please make sure the variable point is always less than or equal to 5.

<script>
var point = 4.5;
var reviewsCount = 296;
var star = '<svg class="svg-inline--fa fa-star fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>';
var halfStar = '<svg class="svg-inline--fa fa-star-half-alt fa-w-17" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star-half-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536 512" data-fa-i2svg=""><path fill="currentColor" d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"></path></svg>';
function addTitleReview(point) {
var content = '';
for (var i = 0; i < Math.floor(point); i++) {
content += star
}
if (point - i > 0) {
content += halfStar
}
if (reviewsCount) {
content += ' <span>' + reviewsCount + ' customer reviews</span>'
}
var content = '<div class="title-review">' + content + '</div>';
var productNameEl = document.querySelectorAll('.product-name, .product__name');
if (productNameEl && productNameEl[0] && document.getElementsByClassName("title-review").length === 0) {
productNameEl[0].insertAdjacentHTML('afterend', content);
}
}
document.addEventListener('DOMContentLoaded', function () {
window.sbsdk.page.onLoad(function () {
setTimeout(function () {
var context = window.sbsdk.page.getContext();
if (context.type === 'product') {
setTimeout(function () {
addTitleReview(point)
}, 1000)
}
}, 500);
})
})
</script>
<style type="text/css">
h1.product__name.mb12 {
margin-bottom: 4px !important
}
.title-review {
margin-bottom: 8px
}
.title-review svg {
color: #fbb400;
height: 1em
}
</style>


This is how reviews are displayed under the product title

B. Add customer's reviews under product description

Add reviews of All Over Print collection to the footer of your product pages

<script>
// Loox review
(function() {
// You can change your review url from loox here, demo: https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs
var reviewLink = 'https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs';
// You can replaced "*" by product ref id to show at selected product page
var productIds = ['*'];
var customReview = {
init: function() {
window.sbsdk.page.onContextUpdate(function(context) {
setTimeout(function() {
if (context.type !== 'product') {
return
}
setTimeout(function() {
var productId = context.payload.id;
if (!customReview.injected() && (productIds.indexOf('*') !== -1 || productIds.indexOf(productId) !== -1)) {
customReview.injectReview()
}
}, 1000);
}, 500);

});
if (window.addEventListener) {
window.addEventListener('message', customReview.calculateHeight, !1)
} else {
window.attachEvent('onmessage', customReview.calculateHeight)
}
},
injected: function() {
return !!document.getElementById('loox-review')
},
injectReview: function() {
var el = document.querySelector('#product');
if (el) {
var e = document.createElement('div');
e.className = 'container';
e.style = '#loox-review { width: 100%;height: 100%;border: none;}';
e.innerHTML = '<div class="row"><div class="col-12 col-md-12"><iframe id="loox-review" style="width: 100%;height: 100%;border: none;}" src="' + reviewLink + '"></iframe></div></div>';
el.parentNode.insertBefore(e, el.nextSibling)
}
},
calculateHeight(event) {
if (!event.data || typeof event.data !== 'string') {
return
}
try {
var data = JSON.parse(event.data);
if (typeof data === 'object' && data.frame !== 'looxReviewsFrame') {
return
}
var el = document.getElementById('loox-review')
if (el) {
el.style.height = data.height + 'px'
}
} catch (_) {}
},
}
document.addEventListener('DOMContentLoaded', function() {
customReview.init()
})
})();
</script>


Sample reviews from Loox

How to get review links from Loox on the existing website

If you use the above scripts, some sample reviews will be added to the product page. In case you can find other links from Loox which have more reviews and want to replace the sample ones, please follow the instructions below:

Go to the product page on Loox.

Right click on the review as shown below and select "View Frame Source".



Copy the code between widget and review of the form VyXXXXXpU on the path widget/VyXXXXXpU/reviews



In https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs'; section of the above script, replace N1lr1T_0GZ by the copied code in step 3, then repeat the steps as instructed to paste your script.

Related articles

Add Power Up Scripts to optimize your store
Block or allow certain countries to access the store
Block traffic from spyware to your site
Add custom announcement to the product page
Hide the Paypal Express Checkout button
Add Facebook Live Chat to your store
Was this article helpful?
Cancel
Thank you!