Enable swatches in your theme

Install product and collection widgets, choose their theme, and restore swatches after changing themes.

Install the swatches widgets in the theme you want to use. The Product widget displays swatches on product pages. The Collection widget displays swatches on product cards, including supported collection and home-page sections.

Both product groups and variant swatches use these widgets. You also need to configure the relevant groups or variant options in Color Swatches.

Enable an app embed

  1. Open Widgets setup in Color Swatches.

  2. Find Product widget or Collection widget, depending on where you want swatches.

  3. If the widget status is Disabled, select Enable.

  4. Select the theme in the Theme field.

  5. Select Enable app embed to open that theme in Shopify's theme editor.

  6. Save the changes in the theme editor.

  7. Return to Color Swatches and select Check status.

Repeat for the other widget if you want swatches on both product pages and collection cards. If the embed step is already marked complete, it is already enabled in the selected theme.

Choose a position on the product page

The product app embed positions swatches automatically. On themes that support app blocks, you can add a Swatches block to choose its position in the product template.

  1. In Widgets setup, select the theme under Product widget.

  2. Select Add app block.

  3. Place the Swatches block where you want it in the product template.

  4. Save the template.

  5. Repeat for each product template that needs the block.

  6. Return to Color Swatches and select Check status.

Keep the product app embed enabled when using an app block. For most themes, the block is optional. If the setup page says your theme requires a block, complete both installation steps.

For variant swatches, also keep the theme's original variant picker in the template. The Swatches block does not replace that requirement.

Collection cards use the collection app embed; a product-page app block does not install collection swatches.

After changing themes

Check the widget installation in the newly published theme. Installation in your previous theme does not establish that the new theme has the required embeds and blocks.

Use the steps above with the new theme selected. If you use app blocks, check every product template you use. When testing an unpublished theme, open that theme's preview to check the result.

If the widget is still missing or appears twice

Confirm that you saved the same theme you are viewing and that the affected product uses a configured template. For collection cards, also check the collection display settings.

If the complete widget appears twice, follow Repeated swatches on a product page.

If installation is complete but swatches remain missing, send support the affected page URL and the theme name, including whether it is the live theme or a preview.

Did this answer your question?
๐Ÿ˜ž
๐Ÿ˜
๐Ÿ˜