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

App Information

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

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.


Display Loox reviews/ratings in the product item

loox integration


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


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.
Please go to Product Filter & Search -> Tool -> Metafields
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

(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.


(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

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

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