Fera Social Proof Integration Guide

📖 Fera Social Proof allows you to earn the trust of your customers & improve your conversions, by showing your shoppers how great your product is. Here is our guide for Fera Social Proof integration with Boost AI Search & Discovery app.

On this page

About Fera Social Proof

1
App Information

  • Use social proof to convert more of your existing traffic by displaying testimonials, reviews, recent viewers, and customer purchases

  • App details: https://apps.shopify.com/fera

2
Fera Social Proof Integration Benefit

  • Improve your store's credibility by displaying social proof pop-up on the product item and give shoppers the filter tool to find the right products within milliseconds.

How to integrate Fera Socia Proof with Boost AI Search & Discovery

This feature only works with Boost AI Search & Discovery V2 and above. To find out which version of our app your store's current theme is installed with, please follow this article.

Build Fera block for the Product item

1

From your Shopify admin, go to Online Store > Themes.

2

Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code.

Select one of the Versions below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out): V2 or V3. Then follow its corresponding Step 3. 

V2

3 (V2)
In Asset folder, search for this file boost-pfs-filter.js. Then locate this line of code 
productGridItemHtml
4 (V2)
Copy and paste this code snippet to where you'd like to add your Fera block: 
'{{itemBanana}}' + // For boost-pfs-filter.js
For example, under the Product price:

If the variable productGridItemHtml does not exist in boost-pfs-filter.js, please find it in the file boost-pfs-filter-html.liquid and paste this code snippet instead: 
[[itemBanana]] // For boost-pfs-filter-html.liquid

5 (V2)
In boost-pfs-filter.js file, locate this line of code: 
ProductList.prototype.afterRender
6 (V2)
Within the function ProductGridItem.prototype.compileTemplate, copy and paste this code snippet: 
// Add {{itemBanana}} into productGridItemHtml and productListItemHtml
// Add item banana
var itemBananaHtml = '';
var self = this;var itemThumbUrl = images.length > 0 ? Utils.optimizeImage(images[0]['src'], '600x600') : boostPFSConfig.general.no_image_url;var itemJson1 = {    
"id": data.id,    
"name": data.title,    
"url": Utils.buildProductItemUrl(data),    
"thumbnail_url": itemThumbUrl,    
"encoded": true,};var variantJson = [];// Check file banana-stand-product-list-container.liquid to get the right valuevar multipleValue = 6008;for (var i in data.variants) {    
var temp = {};    
temp.stock = data.variants[i]['inventory_quantity'] * multipleValue;    
temp.available = data.variants[i]['available'];    
// Use dashboard in order to turn on the necessary options for variants    
if (data.variants[i]['requires_shippping'] !== undefined) {        
temp.needs_shipping = data.variants[i]['requires_shippping'];    
}    
if (data.variants[i]['image'] !== undefined && data.variants[i]['image'] !== null) {        temp.thumbnail_url = data.variants[i]['image'];    
}    
temp.name = data.variants[i].title;    
if (data.variants[i]['inventory_policy'] !== undefined && data.variants[i]['inventory_policy'] == 'deny') {        
temp.inventory_policy = multipleValue * multipleValue;    
} else {        
temp.inventory_policy = multipleValue * multipleValue * multipleValue;    
}    
if (data.variants[i]['inventory_management'] !== undefined && data.variants[i]['inventory_management']) {        
temp.manages_stock = multipleValue * multipleValue;    
} else {        
temp.manages_stock = multipleValue * multipleValue * multipleValue;    
}    
variantJson.push(temp);}itemJson1.variants = variantJson;itemBananaHtml += '<div class="banana-container banana-list-container" data-product_id="{{itemId}}" data-product-data="' + Utils.escape(JSON.stringify(itemJson)) + '" data-container_type="list"></div>';itemHtml = itemHtml.replace(/{{itemBanana}}/g, itemBananaHtml);
7 (V2)
Click Save and you're set!

V3

Before proceeding, open Fera Social Proof app in your Shopify Admin.

In Fera app, while creating your widget, choose your preferred type.

Then select Change for Location > select HTML tag.

You will see an 6-digits ID on field data-fera-container, copy it, and save your widget ID.


  1. Go to Assets folder > search for boost-sd-custom.js > copy and paste in the follow scripts: 
window.__BoostCustomization__ = (window.__BoostCustomization__ ?? []).concat((componentRegistry) => {
  /**
   * General template for fera review
   */
  const generalTemplateFareReview = (data) => {
    return `<div data-fera-container="ENTER YOUR WIDGET ID TO HERE" data-product_id="${data?.id}"></div>`;
  };
  
  /**
   * Append template to component
   */
  const AppendTemplateProductReview = {
    name: 'Other - Fera Review - Append Template Product Review',
    apply() {
      return {
        props(props, element) {
          let productItemData = null;
          const parentElement = componentRegistry.getNearestParentElm(
            element,
            'ProductItem'
          );
          const { props: productItemProps } = parentElement?.getParams() || {};
  
          if (productItemProps)
            productItemData = productItemProps.product || productItemProps.productData;
          if (productItemData) props.template = generalTemplateFareReview(productItemData);
  
          return props;
        },
      };
    },
  };
  
  componentRegistry.useComponentPlugin('IntegrationProductReviewFera', AppendTemplateProductReview);
});
  1. In the script, search for "ENTER YOUR WIDGET ID TO HERE" and replace it with your widget ID that you saved earlier.
  2. Click Save and you're all set,

If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at support@boostcommerce.net.

Related Articles