Smart Product Filter & Search + Flair

1 min read
updated Jan 27 2022
Smart Product Filter & Search logo
Smart Product Filter & Search
by Globo

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="{{ }}"></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:

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