Searchanise Smart Search & Filter + Flair

Searchanise

Smart Search & Filter

Shopify app store page

View all Flair integrations

Instructions

The instructions vary depending on your Flair generation.

Flair Gen 3

Visit Shopify Admin > Themes and click ... > Edit code.
Click Add a new snippet and enter flair-custom as the name.

Paste the following code and click Save:

{% raw %}
<script>
  document.addEventListener('Searchanise.Loaded', function() {
    (function($) {
      $(document).on('Searchanise.ResultsUpdated', function(event, container) {
        var target= ".snize-title";
        FlairApp?.page?.update({
          content:'<flair-badges product-handle="{{ link.product_handle }}"></flair-badges>',
          target: target,
          position: "append"});
      });
    })(window.Searchanise.$);
  });
</script>
{% endraw %}

Open layout/theme.liquid and find the line containing:
```
</body>
```
And add this code before it:
```
{% render 'flair-custom' %}
```
Click Save.

Flair Gen 2

Visit Shopify Admin > Themes and click ... > Edit code.
Click Add a new snippet and enter flair-custom as the name.

Paste the following code and click Save:

<script>
  document.addEventListener('Searchanise.Loaded', function() {
    (function($) {
      function addFlairBadges() {
        try {
          var target= ".snize-title";
          var els = document.querySelectorAll('#snize_results .snize-product');
          for (var i=0; i<els.length; i++) {
            var el = els[i];
            if (/\d+$/.test(el.id)) {
              var pid = RegExp.lastMatch;
              var badgeEl = document.createElement('div');
              badgeEl.innerHTML = '<div data-flair-product-badge data-product-id="' + pid.toString() + '"></div>';
              var flairEl = el.querySelector("[data-flair-product-badge]");
              if (flairEl) {
                flairEl.parentNode.replaceChild(badgeEl.firstChild, flairEl);
              } else {
                var targetEl = el.querySelector(target);
                if (targetEl) {
                  targetEl.after(badgeEl.firstChild);
                }
              }
            }
          }
          FlairApp.refreshProductBadges();
        } catch(e) { console.log("[Flair] Error adding Flair badges", e); }
      }

      $(document).on('Searchanise.ResultsUpdated', function(event, container) {
        if (window.FlairApp) {
          addFlairBadges();
        }
      });
    })(window.Searchanise.$);
  });
</script>

Open layout/theme.liquid and find the line containing:
```
</body>
```
And add this code before it:
```
{% render 'flair-custom' %}
```
Click Save.

Additional Options

Positioning on top of the product image

Change the following line in flair-custom:

var target= ".snize-title";

To this:

var target= ".snize-thumbnail";

Then configure a Flair badge layout with position set to absolute.

Using Flair badge layouts

Flair badge layouts should be set to show on Search pages or Use as default to work with Searchanise pages.

Getting Started

Badges

Banners

Support