Flair Product Badges & Banners Integration Guide

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

About Flair Product Badges & Banners

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

Integration Benefits

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

Demo of Flair Product Badges & Banners Integration

Here are some of our customers' stores with our app and Flair Product Badges/Labels integration.

Flair Product Badges & Banners Integration

Flair Integration

Flair integrates Filter


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.
Please make sure to turn on the Javascript API in Flair setting:

Flair settings Javascript API

Go to the  boost-pfs-filter.js file in your current theme & copy the following snippet:

// For boost-pfs-filter.js
'{{itemFlair}}' +

// For boost-pfs-filter-html.liquid

Then 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 check the file boost-pfs-filter-html.liquid:

Add the below script to the ProductGridItem.prototype.compileTemplate function:

ProductGridItem.prototype.compileTemplate = function(data) {
	var itemFlairHtml = '<div data-flair-product-id="' + data.id + '"></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) {
  if (typeof FlairApp !== 'undefined' && FlairApp) {
        var productIds = data.map(function (value, index) { return value.id });
        "ids" : productIds 
        }).then(function(badges) {
        var FlairHTMLWrapper = jQ.parseHTML(badges);
        for (var i = 0; i < productIds.length; i++) {
            var selector = Selector.products + ' [data-flair-product-id="' + productIds[i] + '"]';
            var productBadges = jQ(FlairHTMLWrapper).find('[data-product-id="' + productIds[i] + '"]');

Still need help? Contact Us Contact Us