Collection swatches widget

Automatic installation

Out app provides App embed for collection pages. The widget finds position to insert swatches on collection page automatically.

If your swatches are not visible on collection page after widget installation please contact support and we'll help you.

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

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

Alternatively, you can contact support and we'll disable swatches for any block on the page for.

Manual installation

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

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

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

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


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

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us