Duplicate swatches and theme conflicts

Many Shopify themes ship their own color swatch feature, and page builders and filter apps often add one too. When one of those renders next to Color Swatches, you get doubled swatches, two different swatch styles on the same page, or styling - like crossed-out values - that doesn’t match anything in the app’s settings.

The app can’t remove another product’s UI for you, but telling the two apart takes a minute, and turning the theme’s version off is usually one toggle.

Whose swatches are whose

Two quick ways to tell:

• Toggle the app embed. In the theme editor, turn off the Product swatches app embed and reload the product page. Whatever swatches remain belong to your theme (or another app). Turn the embed back on afterwards.
• Inspect the element. Right-click a swatch and choose Inspect. Our swatches live inside elements with classes starting with pl-swatches or pl-variant-swatches. No pl- prefix means it isn’t ours.

This also settles styling questions: if a value is crossed out, greyed, or hidden in a way the app’s out-of-stock settings don’t explain, inspect it - it’s almost always the theme’s native variant picker doing its own out-of-stock treatment.

Turn off your theme’s swatches

Theme swatches are a setting on the product page’s variant picker:

1. Go to Online Store > Themes > Customize and navigate to a product page.
2. In the sidebar, select the Variant picker block (inside the product information section).
3. Look for the swatch or style setting and switch the Color option away from swatches - to dropdown, pills, or buttons, whichever your theme offers.
4. Save.

Themes name this differently - Swatches, Color swatches, Variant style, or a per-option style picker - but it’s almost always on the Variant picker block. Some themes also have a swatch toggle in Theme settings that affects collection cards.

Note

If you use the app’s variant swatches, don’t remove the Variant picker block itself - the app needs it on the page and takes over its appearance. You only want to switch off the theme’s swatch styling, and only when it still shows alongside ours.

Duplicates on collection cards

Theme-side swatches on collection cards are usually a Theme settings or product-card section option (often called “Show color swatches” or similar). Turn that off and keep the app’s collection swatches, or the reverse - just not both.

Page builders and other apps

Page builders (Beae, PageFly, GemPages) and filter apps often render their own swatch elements inside their sections. Same diagnosis - inspect for the pl- prefix - and then either:

• disable the swatch element in that app’s editor and let Color Swatches render instead (see Integrations for adding our container to custom sections), or
• keep theirs on that page and exclude ours by adding data-pl-swatches-ignore to the section container.

Not sure which to keep?

Keep whichever does more for you. Theme swatches only cover variants of a single product; Color Swatches also links separate products (product groups), handles out-of-stock rules, tooltips, and translations consistently, and works on collection cards. Most merchants turn the theme’s version off entirely.

If you can’t find the theme setting or the duplicates persist, contact support with your store URL - identifying theme swatches is quick for us, and we can hide them with a config change on our side when the theme has no toggle.