Color Swatches on Product Pages
In This Article
Enabling your color swatches
To enable color swatches, head into Customize (your theme editor) > Theme Settings > Product Grid > here, you can change the Options style to Color swatches.
This will change any product option titled "Color" or "Colour" to use swatches. Any other product option will be displayed in box options, which behave similarly to radio buttons.
Standard Colors
By default, depending on the name of your color variant title, your color swatch will take on a HTML color. If you wish to select this color, please write it exactly how it appears on this list Color Names
Custom Colors
It's possible to upload a small color swatch to be the exact material color as the product. It is recommended to create a small 50x50px section of your product that will be used for the swatch image. Note however that the image must be named after the color option, but be "handleized" with hyphens replacing any spaces or odd characters, be in all lowercase letters and have a .png extension.
If you have colors that share a name but need separate images (for example, if "blue" in one product isn't the same shade as "blue" in another), you will need to get creative when naming your swatches as there is no way to distinguish between two files named blue.png.
You might want to, for example, call one blue Royal Blue and another Navy Blue. Another option is to include the product line or material type in the color name. For example, Blue Leather, Metallic Blue, Blue Shirt Fabric or Blue Cotton. Be sure to reference "naming conventions" below for important details on how to name your files.
Naming Conventions
When adding color swatch variants to your product page you will need to follow the following naming conventions:
Formatting
When uploading an image asset to use as a color swatch, please take note of spacing and formatting.
- For one work titles, the approach is fairly easy. If your color is Black, the name your image black.png. Note how the filename is all lowercase, but this is the only difference.
- By default, your color variant will look for a matching asset with the same filename, excluding spaces and using dashes instead. If your color swatch variant is named Dark Blue, this will look for a file called dark-blue.png in your assets folder.
- Slashes are replaced with hyphens. For example, if your color is Blue/Gray, then name your image blue-gray.png. Note that the forward slash has been replaced with a hyphen.
- If you have a hyphen in your color name, such as Blue-Gray, it remains a hyphen, so the filename would be blue-gray.png.
- If you have extra spaces in your filename in combination with a hyphen, such as Blue - Gray, the spaces and hyphen become a single hyphen — so you'd want to name your file blue-gray.png again in this case.
- For non-standard characters or formatting, you will need to experiment with how color names become formatted.
Adding your files
Head into Online Store > Themes > Actions > Edit Code, then click on the Assets folder in the sidebar to reveal its content.
Under the Assets heading, click on the "Add a new asset" link. Then upload your various swatch images. Note that this is a different location than when you upload images or other files.
Uploading the image files via the file manager will not work.
Troubleshooting Swatches
If your swatches aren't appearing, here's a quick troubleshooting list:
- Be sure you are saving your image files with a .png extension in all lowercase letters and not .jpg or other format.
- Be sure you are uploading the image files to the "Assets" folder in the theme editor (NOT under Settings > Files).
- Be sure you have used all lowercase letters in your file names and replaced any accented characters with the standard letter and any spaces or special characters with hyphens.
- Be sure your image is at least 50x50 pixels.
- Be sure you have the swatches setting enabled.