Supported Versions
The details shared here apply to the most recent versions of Turbo, Retina, Parallax, Responsive, Mobilia, and Artisan. To keep your theme up to date, check out this helpful document.
Flex theme users can view this article for information on how to enable color swatches in the Flex theme.
In This Article
Enabling your color swatches
Product page
To enable color swatches on Product pages, head into Customize (your theme editor) > Theme Settings > Product Grid > under the Product Form area, 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.
Collection page
To enable color swatches on Collection pages, head into Customize (your theme editor) > Theme Settings > Product Grid > under the Collections and Search Results area, you can check off the 'Show color swatches' setting.
This will display the color swatches below product thumbnail images on collections and search results.
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.
- You may potentially experience a "flash" of the HTML color before your custom color swatch loads. If you have custom PNG files for variants that end of HTML color names, the issue is more noticeable, however, this is an edge-case situation.
Adding your files
For Turbo, Parallax, Retina, Responsive, Mobilia, and Artisan, 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.
For the Flex theme, you'll need to upload them in the Files page in the Shopify admin. From your Shopify Admin, head into Settings > Files.
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.
- If your product option is not titled "Color" or "Colour" (may be the case if your site is not in English), you will need to make a minor edit to the product-swatch.liquid and collection-swatch.liquid files (online store > themes > actions > edit code > snippets). Locate this code:
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}and change it to be:{% if downcased_option contains 'your-option-title' %}where you enter your option title instead, for example, 'couleur' or 'farbe' etc.