Our Symmetry theme has the ability to show swatches on the product page.
The theme has two methods for swatches.
- CSS colors - used where your color names match a preset list of colors
- Uploaded images - used when you'd prefer to add in your own images or, when your color names don't match the css colour list.
To set up your swatches, go into the Theme Customizer, click Theme Settings at the top of the left sidebar, and in the Products section, scroll down to SWATCH.
Type the option name for your color variants e.g. Color, Pattern, Couleur, Farbe.
Then, choose your swatch method.
CSS color method
This is the default 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 on product pages
Uploaded Images
1. Choose the option use uploaded images instead of HTML colors
2. 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
Examples:
"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"
3. Go to Admin > Settings > Files and upload your new image files
4. Your swatch color images will then be displayed on product pages
