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.
In this article
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
App > Product Filter & Search > Tools
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
Save
button when you're done.
Save
button when you're done.
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(); }