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

[[itemFlairHtml]]
// For boost-pfs-filter.js file'{{itemFlairHtml}}' +

If productGridItemHtml variable does not exist, please look for it in the file boost-pfs-filter-html.liquid:
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) /*** **** ***/
}
ProductList.prototype.afterRender = function (data)
{
/*** Add the code at the end of function before the close bracket ****/
if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); } /*****************/
};
V3
if (window.boostSDAppConfig) { window.boostSDAppConfig.integration = Object.assign({ labels: 'flair' }, window.boostSDAppConfig.integration || {});}
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.