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

2

Display a filter option by ratings

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

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

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

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

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>

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

// 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 

if (typeof Yotpo !== 'undefined') {
    var api = new Yotpo.API(yotpo);
    api.refreshWidgets();
}