Use Variant swatches when choices such as Color and Size are variants of the same Shopify product. The app turns those options into visual selectors.
If each color has its own Shopify product listing, use Product groups to link those products instead. You can use both features in the same store.
Enable variant swatches
Open Variant swatches in Color Swatches.
Under Status, choose Enabled to use variant swatches across your store, or Only selected products to limit them to specific products.
If you chose Only selected products, use Select products to choose the products. Use Manage selected products to change an existing selection.
Set Displayed on to Product pages only or Product and collection pages, depending on where you want swatches.
Status and display changes save automatically.
Choose a style for each option
The app loads your existing options from Shopify. If an option or value you recently added is missing, select Sync options.
Choose a Swatch Style beside each option:
Style | What shoppers see |
|---|---|
Pill / Button | Text buttons, useful for options such as Size or Fit. |
Color or image | Solid colors, two-color swatches, or uploaded images. Each value needs a swatch assignment. |
Variant image | Images assigned to the variants in Shopify. |
Style changes save automatically. For Color or image, select Configure to assign the colors or images, then select Save. If the Auto-detect colors banner is available, you can use it to create matching swatches from the color names in your option values. Review the results and adjust them to match your products.
See Change swatch colors, images, and patterns for the assignment steps.
Add swatches to your theme
Follow Enable swatches in your theme to install the product widget and, if needed, the collection widget.
Keep your theme's original variant picker in every product template you use. It is often called Variant picker. Color Swatches hides it visually but still needs it to update the selected variant, price, images, and add-to-cart behavior. Removing the picker can prevent variant swatches from appearing.
Check a product page
Open a product with the options you configured. If you limited variant swatches to selected products, use one of those products.
If color names appear as text instead of colored swatches, check that the option uses Color or image and its values have assigned swatches.
If an option with just one value is missing, open Appearance > Variant swatches and check Hide single value swatches. Turn it off and save if you want that option visible.
If swatches are missing on one product template, check that template's widget installation and original variant picker.