Smart Product Filter & Search + Flair

Smart Product Filter & Search

by Globo

Shopify app store page

Modify the globo.filter.product.liquid

Edit snippets/globo.filter.product.liquid:

{% comment %}Do not edit this file{% endcomment %}

Add line 1 as the first line in this file. This will prevent the Smart Product Filter & Search app from overridding our changes.

Next we need to add a placeholder element where Flair badges should be inserted:

<div class="spf-product__info">
    <div class="h4 spf-product-card__title"><a translatable href="{{root_url}}{{product.url}}">{{product.title}}</a></div>
    <div data-flair-product-badge data-product-id="{{ product.id }}"></div>

Add line 3. You can move this line as needed to move the Flair badges.

Modify your theme.liquid

Edit layout/theme.liquid and add the following just before the closing </body> tag:

<script>
    window.addEventListener('globoFilterRenderCompleted', function (e) {
      try {
        FlairApp.refreshProductBadges();
      } catch(e) { console.log("[Flair] Error refreshing badges", e); }
    });
  </script>