Boost AI Search & Filter

Boost AI Search & Filter by Boost Commerce adds AI-powered search, product filters, and merchandising to Shopify storefronts. It’s one of the most widely used filter apps, and plenty of stores run it alongside Color Swatches: Boost narrows the collection, our swatches show the color choices on each product card.

The integration works out of the box in most cases. Follow the steps below only if swatches don’t appear on a collection page after a shopper filters or paginates.

Boost re-renders the product grid with its own template each time results change. Swatches need a container in that template and a reload call after each render, otherwise they show on first load and vanish when Boost swaps in new results.

Setup

In your theme editor, open App embeds and turn on the collection swatches embed.
Open boost-pfs-filter-html.liquid and add the swatch container where you want swatches to appear:
```
<div data-pl-swatches-collection data-product-id="{{product.id}}" data-product-url="{{itemUrl}}"></div>
```
If your theme doesn’t have that file, open boost-pfs-filter.js and add the same container to the productGridItemHtml variable, using Boost’s own variables:
```
<div data-pl-swatches-collection data-product-id="{{itemId}}" data-product-url="{{itemUrl}}"></div>
```
In boost-pfs-filter.js, reload swatches after Boost renders the grid. Add this to the Filter.prototype.afterRender function:
```
if (typeof PlatmartSwatchesCollection != 'undefined') {
  PlatmartSwatchesCollection.load()
}
```

Swatches now render on filtered and paginated collection pages.