Loox Integration Guide

Here is our guide for Loox integration with Boost Product Filter & Search app. Before starting, make sure you install Loox app on your Shopify store.

Install Loox- Photo Reviews App


About Loox

1
App Information

This app helps you to collect photo reviews from your happy customers, strengthen your brand and boost sales with strong social proof.

2
Loox Integration Benefit

  • Display reviews/ratings in the product item.
  • Create a filter option by reviews

Demo of Loox Integration

Here are some of our customers' stores with our app and Loox integration.

1

Display Loox reviews/ratings in the product item

loox integration

2

Display filter option by ratings/reviews

We have not yet received any request to integrate with Loox Review. However, it should exactly like the screenshot.

loox reviews


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.
1
Please go to Product Filter & Search -> Tool -> Metafields
2
Add the new metafields like the image below:
Namespace: loox
Key: avg_rating

Namespace: loox
Key: num_reviews

How to edit metafield to prepare for the integration

How to edit metafield to prepare for the integration

3
(Optional) Build a filter option by ratings/reviews.
Wait about 3 minutes for the syncs done before creating a filter option by review ratings: Go to the app's Homepage > Manage Filter tree > From a filter tree, click Add a filter option button > Choose Review Ratings > Click 2 Save buttons. Refer to  this article for more details.

4

(Optional) Build Rating for the product items

Go to the  boost-pfs-filter.js file in your current theme & copy the following snippet:

// For boost-pfs-filter.js
'{{itemReviews}}' +

// For boost-pfs-filter-html.liquid
[[itemReviews]]

Then paste it inside the block productGridItemHtml, where you want your Ratings to appear, for example, under the product price: 

loox code

If  productGridItemHtml variable does not exist, please check the file boost-pfs-filter-html.liquid:

loox codes

5
Add the below script to the  ProductGridItem.prototype.compileTemplate function:
ProductGridItem.prototype.compileTemplate = function(data) {

	/***
	****
	***/
	// Add Loox rating
  	var avg_rating = Utils.getProductMetafield(data, 'loox', 'avg_rating');
  	var num_reviews = Utils.getProductMetafield(data, 'loox', 'num_reviews');
	var itemReviews = '';
	if (avg_rating !== null && num_reviews !== null) {
		itemReviews = '<div class="loox-rating" data-id="{{itemId}}" data-rating="'+avg_rating+'" data-raters="'+num_reviews+'"></div>';
	}
  	itemHtml = itemHtml.replace(/{{itemReviews}}/g, itemReviews);
}

Still need help? Contact Us Contact Us