Product page widget

Show swatches on your product pages by turning on the Product swatches app embed. It also powers variant swatches, so it’s the one install step both features share.

There are two ways to add it: an app embed that places swatches automatically, and an app block that you position by hand. Most stores only need the app embed.

App embed (recommended)

The app embed finds the right spot near your product options and inserts swatches there. It works on every theme type and applies to all your product templates at once.

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 Product widget section, select your theme.
3. Click Enable app embed. The theme editor opens with the Product swatches embed turned on.
4. Click Save in the theme editor.
5. Back in the app, click Check status to confirm the install.

That’s enough for most stores. Open a product page on your storefront to check the placement.

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 Product swatches. The steps above are the recommended path since the app checks the install for you.

App block (custom positioning)

Use the app block when you want swatches at an exact spot the embed doesn’t pick. The block renders in Liquid, so it loads a touch faster, but it works only on Online Store 2.0 themes and has to be added to each product template you use.

1. Open the Color Swatches app and click Manage widgets on the home page.
2. In the Product widget section, select your theme.
3. Click Add app block. The theme editor opens with the Swatches block added to your product template.
4. Drag the block to the position you want.
5. Click Save in the theme editor.
6. Back in the app, click Check status to confirm the install.

If you use several product templates, add the block to each one: open the template in the theme editor, click Add block, and choose Swatches under Apps.

Note

To move the product widget, the app block is the tool: drag it wherever you want. If your theme doesn’t fully support app blocks, use manual installation below, or contact support and we’ll reposition it without theme edits.

Here’s the whole repositioning flow, start to finish:

Manual installation

Use automatic installation when you can. Manual installation helps when your theme doesn’t support app blocks, or it’s non-standard and the app can’t auto-place the widget.

Add this snippet to your product template where you want swatches to render:

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

The app renders swatches inside the container.