Product Filters by Boost Integration Guide

To integrate our app with Product Filters by Boost Commerce follow the 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.