Collection swatches widget

To add swatches on collection pages follow the steps below.

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

2. Next, 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:

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

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