Burst Commerce Logo
Flair icon Flair
Getting Started
Badges
Banners
Customization
Support

Smart Product Filter & Search + Flair

1 min read
updated Jan 27, 2022
Smart Product Filter & Search
by Globo
Shopify app store page

Modify the globo.filter.product.liquid

Edit snippets/globo.filter.product.liquid:

1
2

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

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:

1
2
3

<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:

1
2
3
4
5
6
7

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