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 Product Filter & Search 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 Product Filter & Search 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 value
var 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

3 (V3)
In Asset folder, locate a file named boost-sd-customization.js.
4 (V3)
Add the code snippet below to the boost-sd-customization.js file: 
if (window.boostSDAppConfig) {
  window.boostSDAppConfig.integration =  Object.assign({
     others: 'fera'
 }, window.boostSDAppConfig.integration || {});
}
5 (V3)
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