Color swatches

In Baseline theme you can enable color swatches on product pages and collection pages.

To enable color swatches, you can turn this on inside Theme settings > Products:

For color swatches to work on product pages - the options style needs to be set to buttons:

Color swatches by default will be enabled on options with the title of Color or Colour (for other languages it is also color but translated). To change what the color swatch option name is, edit your theme's languages and change the value under Products > Color swatch trigger:

Uploading swatch files

Upload your swatch png files to your store's file assets. This can be found in your store admin by going to Settings > Files.

The file format for png files needs to be the color all in lowercase and to use hyphens instead of spaces. Any special characters are removed.

So for example:
Black → black.png
Rose Gold → rose-gold.png
Green / Yelow → green-yellow.png
If there is no file match for a color swatch - the theme will fallback to a CSS color if there is on available:
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.