Yotpo Integration Guide

Yotpo helps thousands of forward-thinking brands to integrate data-driven solutions for reviews, loyalty, SMS marketing, and more. Here is the guide we create for Yotpo Integration with Boost Product Filter & Search.

About Yotpo

1
App Information

  • The app integrates data-driven solutions for reviews, loyalty, SMS marketing, and more, empowering brands to create smarter, higher-converting customer experiences.
  • App details: https://apps.shopify.com/yotpo-social-reviews

2
Yotpo Integration Benefits

  • Display ratings/reviews in the product items.
  • Display filter option by ratings/reviews

Demo of Yotpo Integration

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

1
Display ratings/reviews in the product items.

  • https://www.romadesignerjewelry.com/collections/all

Yotpo Integration example | Display ratings/reviews in the product items.

2
Display a filter option by ratings

  • https://www.babyhq.com.au/collections/prams

Display a filter option by ratings

  • https://www.afflictionclothing.com/collections/all

Another example for Yotpo Integration with Boost Commerce


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 Ratings for Filter option

1
Go to the menu App > Product Filter & Search > Tools
2
Switch to the Product Review tab and update Yotpo App key in the Third-party integration field. You can refer to this document to get more details about how to get the Yotpo app key

Build Ratings for Filter option | How to Integrate Yotpo Integration

3
Hit on Save button when you're done.
4
Edit a filter tree and create a filter by rating
5
Hit on the  Save button when you're done.

Build Ratings for Filter optionBuild Rating for the product items.

This guide to building ratings for product items requires coding practices. If you have difficulties following it, please ask for our help at support@boostcommerce.net.
1
Edit your current theme.
2
Get the Reviews template from the liquid file of the product item (ex: product-card-grid.liquid)
Yotpo integration

Then convert it to Javascript and copy this script:

// For boost-pfs-filter.js
'<div class="grid-view-item__reviews"><div class="yotpo bottomLine" data-appkey="......." data-domain="{{itemDomain}}" data-product-id="{{itemId}}" data-product-models="{{itemId}}" data-name="{{itemTitle}}" data-url="{{itemUrl}}" data-image-url="{{itemThumbUrl}}" data-description="{{itemDescription}}" data-bread-crumbs="{{itemTags}}"> </div></div>' + 

// For boost-pfs-filter-html.liquid
<div class="grid-view-item__reviews"><div class="yotpo bottomLine" data-appkey="......." data-domain="[[itemDomain]]" data-product-id="[[itemId]]" data-product-models="[[itemId]]" data-name="[[itemTitle]]" data-url="[[itemUrl]]" data-image-url="[[itemThumbUrl]]" data-description="[[itemDescription]]" data-bread-crumbs="[[itemTags]]"> </div></div>
3
Go to the boost-pfs-filter.js file, then find productGridItemHtml which is the template of the product item after filtering, and paste the above script into where you want the Ratings to appear, for example, under the product price:
Yotpo integrate

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

Yotpo code

4
Build attributes of Reviews by adding the following script:
// Build Domain
itemHtml = itemHtml.replace(/{{itemDomain}}/g, Utils.escape(boostPFSConfig.shop.domain));
 
// Build Description
var itemDescription = data.description;
itemDescription = itemDescription.substr(0, itemDescription.indexOf('##highlights##'));
itemHtml = itemHtml.replace(/{{itemDescription}}/g, itemDescription);
   
// Build Tags
itemHtml = itemHtml.replace(/{{itemTags}}/g, Utils.escape(data.tags.join(';')));

before the comment "Add main attribute" of the ProductGridItem.prototype.compileTemplate function 

Yotpo codes

5
Add the following script to the  FilterResult.prototype.afterRender function
if (typeof Yotpo !== 'undefined') {
    var api = new Yotpo.API(yotpo);
    api.refreshWidgets();
}

Still need help? Contact Us Contact Us