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>
B. Add customer's reviews under product description
<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>
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.
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
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>
B. Add customer's reviews under product description
<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>
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.
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
Updated on: 12 / 11 / 2021