Integrating with Boost AI Search & Filter app

Our app supports Boost AI Search & Filter app by Boost Commerce out of the box. Most of the time, no additional integration is required. However, if you're using old version of Boost AI Search & Filter app or have non-standard setup then follow steps below.

1. First, enable the Collection swatches app embed in Theme Editor:

2. Next add the following snippet to boost-pfs-filter-html.liquid. Put it in the place where you want to render swatches:

<div data-pl-swatches-collection data-product-id="{{product.id}}" data-product-url="{{itemUrl}}"></div>

If you don't have boost-pfs-filter-html.liquid file in your theme then open boost-pfs-filter.js. And add the following code to productGridItemHtml variable:

'<div data-pl-swatches-collection data-product-id="{{itemId}}" data-product-url="{{itemUrl}}"></div>'

3. Now open boost-pfs-filter.js and add the following code to Filter.prototype.afterRender function:

if (typeof PlatmartSwatchesCollection != 'undefined') {
  PlatmartSwatchesCollection.load()
}

Now swatches should appear on the collection page. If you'll need help with setup please contact support.