Swatches can be added in the latest versions of our Boost, Expression, Showcase and Symmetry themes. These are small visual indications of what colors the product is available in.
Note: Each theme will have a different way of showing swatches, the above is just for illustration.
To set up swatches, go to Theme Customizer, click Theme settings at the top of the left sidebar, and in the Products section, scroll down to SWATCH/COLOR SWATCHES.
Type the option name for your color variants e.g. Color, Pattern, Couleur, Farbe
The option name must match the option name you've used for your products.
Next, choose your swatch Source to be either CSS colors or Uploaded images. If your theme doesn't have a Source dropdown, it will use CSS colors until you select the 'Use uploaded images instead of HTML colors' checkbox.
CSS color method
1. Go to a product in your Admin and ensure each of your color variants has an exact name from this list. Note: using names not in this list will result in no color swatch being shown.
2. Your swatch colors will then be shown automatically in product pages and on collection pages (depending on your theme)
Uploaded Images method
1. Create a small png file for each color. (40px x 40px is a good size.)
The name of the png file must match the "handle-ized" version of the variant name.
- Use only lowercase letters
- Replace any spaces with a dash
- Remove any special characters
- "Coral Red" would require a file named "coral-red.png"
- "Waldgrün" would require a file named "waldgrun.png"
- "Blue-green" would require a file named "blue-green.png"
2. Go to Admin > Settings > Files and upload your new image files
3. Your swatch color images will then be displayed on both product and collection pages.