Collection swatches widget

Automatic installation

Our app provides an App embed for collection pages. The widget automatically finds a position to insert swatches on the collection page.

open large video player in a new tab

If you want our widget to ignore certain blocks on the collections page, add a data-pl-swatches-ignore attribute to the container. For example:

<div data-pl-swatches-ignore>
  <!— Swatches won't be rendered in this block —>
</div>

Manual installation

We recommend using automatic installation when possible. Manual installation can be useful in the following cases:

• You have a very non-standard theme that doesn't support our App embed
• You want to have complete control on the position of the collection swatch widget

To install the widget manually, place the following snippet in your collection product cards to the place where you want to render swatches (usually below the price):

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

Integrations

If you use third-party product filters, you might need additional integration. Check out our integration guides with popular product filter apps:

• Integration with Smart Product Filter & Search by Globo
• Integration with Boost AI Search & Filter app