Color swatches are thumbnail images used to represent particular colors, patterns, etc. for product variants. Swatches are available as a variant display option for the product page, as well as the product grid and tag filters on the collection page.
Use the theme editor to confirm you're using one of the supported versions, then select the variant style and activate for product and collection pages. Align your variant titles with the standard colors, then replace these with your custom colors by formatting and adding your files.
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.
Select the variant style
In the Product grid portion of the Theme Settings, activate swatches by clicking Color swatches below Options style.
Collection page
To enable color swatches on Collection pages, click to enable the Show color swatches setting below COLLECTIONS AND SEARCH RESULTS.
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 an 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.
When adding color swatch variants to your product page you will need to follow the following naming conventions.
Formatting
- For one-word titles, the approach is fairly easy. If your color is Black, then name your image black.png (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 with 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 Add a new asset to 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 to 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 formats.
- 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" (maybe 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' %}Adjust it to:{% if downcased_option contains 'your-option-title' %}Replace your-option-title with the custom title, such as 'couleur' or 'farbe' etc.