Collection page widget

Show swatches on collection cards by turning on the Collection swatches app embed. Shoppers can then pick a color straight from the collection page before clicking into a product.

Turn it on

Turn it on from the app - it opens the theme editor at the right spot and verifies the install for you:

1. Open the Color Swatches app and click Manage widgets on the home page.
2. In the Collection widget section, select your theme.
3. Click Enable app embed. The theme editor opens with the Collection swatches embed turned on.
4. Click Save in the theme editor.
5. Back in the app, click Check status to confirm the install.

The widget finds a spot on each product card, usually below the price. Open a collection page on your storefront to check.

You can also turn the embed on by hand: in your Shopify admin, go to Online Store > Themes > Customize, open App embeds, and turn on Collection swatches. The steps above are the recommended path since the app checks the install for you.

Note

If swatches don’t show up after enabling the embed, contact support and we’ll help you get them placed.

Ignore certain blocks

To stop swatches rendering inside a particular block, like a featured-products row, add a data-pl-swatches-ignore attribute to that container:

<div data-pl-swatches-ignore>
  <!-- Swatches won't render here -->
</div>

Or contact support and we’ll disable swatches for any block without theme edits.

Manual installation

Use this for non-standard themes, or when you want full control over where swatches sit. Add the snippet inside your product card, usually below the price:

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

The container needs the product’s ID and URL so the app knows which swatches to render.

Filter and search apps

Third-party filter and search apps re-render the product grid when shoppers filter, which can drop the swatches. If you use one, it may need a little extra wiring. See Integrations for Boost, Globo, and the general pattern.

Changing position

To move the collection widget to a different spot, contact support and we’ll position it for you.