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="{{ 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:

• Product Filters by Globo Integration Guide
• Product Filters by Boost Integration Guide

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