Color Swatches on Product Pages
In This Article
Enabling your 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 50x50 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.
Naming Conventions
When adding color swatch variants to your product page you will need to follow the following naming conventions:
Spacing
When uploading an image asset to use as a color swatch, please take note of spacing. 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. Other 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.
Most simple example, if your color is 'Black', the name your image black.png. Note how the filename is all lowercase.
Go to 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.
Newer versions will look like this:
Older versions will look like this:
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.