Flair Product Badges & Banners Integration Guide

Here is the guide for Flair Product Badges & Banners Integration with Boost AI Search & Discovery app.

On this page

About Flair Product Badges & Banners

1
App Information

  • Flair Product Badges & Banners makes it easy to promote products and promotions so customers will take notice, which should translate to more profit.
  • App details: https://apps.shopify.com/flair

2
Integration function

  • The integration between Flair and Boost AI Search & Discovery increases sales by showing product labels, badges & banners in the product item while filtering.

How to integrate Flair 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.

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

1 (V2)
Please make sure to turn ON the Javascript API in Flair setting:

2 (V2)
Copy the following snippet & choose the position of Flair item: 
Please check if the file boost-pfs-filter-html.liquid file is available in your source code. 
If yes, please copy the following code snippet: 
[[itemFlairHtml]]
If no, please copy this one instead: 
// For boost-pfs-filter.js file
'{{itemFlairHtml}}' +
3 (V2)
Paste it inside the block productGridItemHtml, where you want your FlairHtml to appear, for example, under the product title:

If productGridItemHtml variable does not exist, please look for it in the file boost-pfs-filter-html.liquid:

4 (V2)
Go to the boost-pfs-filter.js file in your current theme & copy the following snippet:
Add the below script to the ProductGridItem.prototype.compileTemplate function: 
ProductGridItem.prototype.compileTemplate = function(data) {
	/*** Add the code at the end of function before the close bracket ****/
	var itemFlairHtml = '<div data-flair-product-id="' + data.id.toString() + '"></div>';
    	itemHtml = itemHtml.replace(/{{itemFlairHtml}}/g, itemFlairHtml);
	// Add main attribute (Always put at the end of this function)
	/***
	****
	***/
}
Add the below script to the ProductList.prototype.afterRender function: 
ProductList.prototype.afterRender = function (data) {
  /*** Add the code at the end of function before the close bracket ****/
  if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); }
  /*****************/
};

5 (V2)
Click Save and you're all set!

V3

1 (V3)
From your Shopify admin, go to Online Store > Themes.
2 (V3)
Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code.
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({
     labels: 'flair'
 }, 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