📖 Here is the guide for Flair Product Badges & Banners Integration with Boost AI Search & Discovery app.
About Flair Product Badges & Banners
App Information
Flair Product Badges & Banners make 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 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 or Turbo. 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) {
// Existing logic to build itemHtml...
// 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)
// Your additional main attribute logic here
return itemHtml; // Ensure to return the modified HTML
} Add the below script to the ProductList.prototype.afterRender function:
ProductList.prototype.afterRender = function(data) {
// Existing logic or actions based on data...
// Add the code at the end of the 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-custom.js.
4. (V3)
Add the code snippet below to the boost-sd-custom.js file:
if (window.boostSDAppConfig) {
window.boostSDAppConfig.integration = Object.assign(
{ labels: 'flair' },
window.boostSDAppConfig.integration || {}
);
}5. (V3)
Click Save and you're all set!
Turbo
1. Go to Boost AI Search & Discovery > Integration > Shopify Integration > Select your preferred theme > Edit code.
2. Locate this file customization.js & add the following code at the end of it:
if (window.boostWidgetIntegration) {
window.boostWidgetIntegration.integration = Object.assing({
label: 'deco'
}, window.boostWidgetIntegration.integration || {});
}3. Locate this file: product-item/product-info.liquid, and add the following code as the screenshot below:
<div class="flair-badge-layout" data-flair-product-badge data-product-id="{{ product.id }}" data-flair-product-id="{{ product.id }}></div>
If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at [email protected].