Boost Search + Flair

Boost View on the Shopify App Store

Before you begin...

The instructions vary depending on your Flair generation and Boost versions.

How to determine your Boost app version

Visit the Boost app > Account Settings > App preferences > App version.

• If the version says Boost TURBO, you are using Boost TURBO.

Otherwise, follow these steps to determine which legacy Boost version you are using:

• Open the Shopify theme code editor.

• Open the layouts/theme.liquid file.

• If you see the following: {% include 'bc-sf-filter' %}, you are on Boost v1.

• If you see the following: {% include 'boost-pfs' %} or {% render 'boost-pfs' %}, you are on Boost v2.

• Otherwise, you are on Boost v3.

Boost Turbo

• Visit the Boost app > Integration > Third-party Integration > Product Label.
• Activate the Flair Product Badges + Labels and then click Okay.

Boost v3

Edit assets/boost-sd-custom.js:

if (window.boostSDAppConfig) {  window.boostSDAppConfig.integration =  Object.assign({ labels: 'flair' }, window.boostSDAppConfig.integration || {});}

And add line 1.

Customizing

Boost v3 provides a customization API to modify the rendered items.

Display Option: Under the product title

Edit assets/boost-sd-custom.js and add the following code:

const customize = {
  updateProductItem: (componentRegistry) => {
    componentRegistry.useComponentPlugin('ProductItem', {
      name: 'Add Flair under the title',
      enabled: true,
      apply: () => ({
        afterRender(element){
          let productData = element.getParams().props.product;
          let productItem = document.querySelector('.boost-sd__product-item[data-product-id="'+ productData.id +'"]');
          let flairEl = productItem.querySelector('[data-flair-product-badge]');
          if (flairEl) {
            productItem.querySelector('.boost-sd__product-title').after(flairEl);
          }
        }
      }),
    });
  }
}
window.__BoostCustomization__ = (window.__BoostCustomization__ ?? []).concat([customize.updateProductItem]);

Display Option: On top of the product image

Edit assets/boost-sd-custom.js and add the following code:

const customize = {
  updateProductItem: (componentRegistry) => {
    componentRegistry.useComponentPlugin('ProductItem', {
      name: 'Add Flair on top of the product image',
      enabled: true,
      apply: () => ({
        afterRender(element){
          let productData = element.getParams().props.product;
          let productItem = document.querySelector('.boost-sd__product-item[data-product-id="'+ productData.id +'"]');
          let flairEl = productItem.querySelector('[data-flair-product-badge]');
          if (flairEl) {
            productItem.querySelector('.boost-sd__product-image').append(flairEl);
          }
        }
      }),
    });
  }
}
window.__BoostCustomization__ = (window.__BoostCustomization__ ?? []).concat([customize.updateProductItem]);

Boost v2

Edit assets/boost-pfs-filter.js as follows:

Find the ProductGridItem.prototype.compileTemplate function

ProductGridItem.prototype.compileTemplate = function (data) {
    // The beginning of this function was removed for brevity
    // You should only add the next line
    itemHtml = itemHtml.replace(/{{itemFlairHtml}}/g, '<div data-flair-product-badge data-product-id="' + data.id.toString() + '"></div>');
    return itemHtml;
  };

And add line 4.

Find the ProductList.prototype.afterRender function

ProductList.prototype.afterRender = function(data) {
  if (!data) data = this.data;
  if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); }
};

And add line 3.

Display Option: Under the product title

To add Flair badges under the product title, edit snippets/boost-pfs-filter-html.liquid:

<h3 class="card__heading {{cardIsHeadingFive}}">
    <a href="{{itemUrl}}" class="full-unstyled-link">
      {{itemTitle}}
    </a>
  </h3>
  {{itemFlairHtml}}

And add line 6.

Display Option: On top of the product image

To add Flair badges on top of the product image, edit snippets/boost-pfs-filter-html.liquid:

<div class="card__inner {{cardInnerProductClass}}" style="--ratio-percent: {{imageAspectRatio}}%">
  {{itemImages}}
  <div class="card__content">
    {{itemFlairHtml}}

And add line 4.

Boost v1

Open the assets/bc-sf-filter.js file in the Shopify theme editor.

Find the bcSfFilterTemplate variable.

var bcSfFilterTemplate = {
  'productGridItemHtml': // ... shortened for brevity
    '<h2 class="productitem--title">' +
    '<a href="{{itemUrl}}" tabindex="1">' + '{{itemTitle}}' + '</a>' +
    '</h2>' +
    '<div data-flair-product-badge data-product-id="{{itemId}}"></div>' +

And add the Flair badge DIV to the product grid item template as shown on line 6.

Find the BCSfFilter.prototype.buildExtrasProductList function.

BCSfFilter.prototype.buildExtrasProductList = function(data, eventType) {
if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); }
};

And add line 2.