Integrations

Color Swatches adds swatches to your storefront through Shopify app embeds. The embed runs on your product and collection pages, finds the right spot in the rendered HTML, and inserts the swatches. Because most apps use your theme’s normal product and collection templates, swatches show up alongside them without any integration work.

A few kinds of apps render their own markup instead, and those sometimes need a one-line snippet to wire swatches in.

When manual setup is needed

Two situations call for it:

• The app builds its own layout. Page builders render product and collection sections from their own markup, so the app’s auto-detection may not find a place to insert swatches.
• The app re-renders results after the page loads. Search and filter apps swap in a new product grid when shoppers filter, sort, or paginate. Swatches render once on first load, then disappear when the app replaces the grid.

In both cases the fix is the same: give the app a fixed container to render swatches into, and (for client-side re-rendering) tell the app to reload swatches after it updates the grid.

The swatch containers

Drop one of these into the app’s template where you want swatches to appear.

Product page:

<div data-pl-swatches-product></div>

Collection page:

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

The collection container needs the product’s ID and URL. The exact variable names depend on the app’s template - some use {{ product.id }}, others use their own variables like {{ itemId }} and {{ itemUrl }}.

Note

Both containers need the matching Color Swatches app embed turned on in your theme editor under App embeds. The collection container won’t render anything without the collection swatches embed enabled.

Guides

• Beae page builder - drag-and-drop page builder; swatches follow your products onto Beae-built pages.
• Boost AI Search & Filter - AI search and filters by Boost Commerce; keep swatches on the cards when shoppers filter.
• Smart Product Filter & Search by Globo - collection filtering and instant search; swatches persist through filtered grids.

Using a different app? The same container pattern works for most of them. If swatches don’t show up after adding the snippet, contact support with the app name and we’ll help you wire it in.