Ali Reviews Integration Guide
Ali Reviews empowers 40,000 + Shopify stores to build social proof and maximize conversion rates by displaying reviews throughout buyer’s journey. Here is our guide for Ali Review integration with Boost Product Filter & Search.
In this article
About Ali Reviews
1
App Information
- Ali Reviews imports product reviews and showcase the product ratings & reviews on Google Shopping ads.
- App details: https://apps.shopify.com/ali-reviews
2
Ali Reviews Integration Benefit
- Gain trust from visitors & trigger buying decisions by displaying reviews/ratings in the product item and using the rating filter option.
- Get 10% off for all plans by using the coupon code "ALIREVIEWS10". This code is valid until December 2nd, 2020.
Demo for Ali Reviews integration with Boost
Here are some of our customers' stores with our app and Ali review integration.
Instruction
Attention: The current document only works with the new front-end lib from Boost Commerce. Please read this document first to know if you are using the latest version.
Build Rating for the product items
'<div product-id="{{itemId}}" class="arv-collection-boostcommerce arv-collection arv-collection--{{itemId}}">{{itemReviews}}</div>' + // For boost-pfs-filter.js
<div product-id="[[itemId]]" class="arv-collection-boostcommerce arv-collection arv-collection--[[itemId]]">[[itemReviews]]</div> // For boost-pfs-filter-html.liquid
Then paste it inside the block productGridItemHtml, where you want your Ratings to appear, for example, under the product price:
If the variable productGridItemHtml does not exist in the boost-pfs-filter.js, please find it in the boost-pfs-filter-html.liquid
Add the code below in the boost-pfs-filter.js
ProductGridItem.prototype.compileTemplate = function(data) {
/*...*/
// Add item reviews
var itemReviewsHtml = '';
if (data.review_ratings && data.review_ratings > 0) {
var itemReviewsHtml = '<input type="hidden" class="alr-rating" data-filled="alr-icon-star" data-empty="alr-icon-star" data-fractions="3" data-readonly value="' + data.review_ratings + '"/>' +
'<span class="alrv-prod-rating__text">' + data.review_count + ' reviews</span>';
}
itemHtml = itemHtml.replace(/{{itemReviews}}/g, itemReviewsHtml);
/*...*/
}
// Add additional feature for product list, used commonly in customizing product list
ProductList.prototype.afterRender = function(data, eventType) {
/*...*/
$(".alr-rating").rating();
/*...*/
}
Everything should be good now:
If you still not see the review, please try to force sync the data & check it again:
Build a filter option by rating/reviews
If something goes wrong, please contact us at support@boostcommerce.net.