How to add variant color swatches
Some of our themes allow the use of swatches (instead of dropdowns) for the product variants.
Step 1: Enable the swatch options
To activate swatches go to the theme editor via Shopify Admin > Online Store > Themes > Customize theme.
In the theme editor choose open the theme settings tab and then open the section named Products
Here you will find options that are commonly shared for products across your store on product pages, featured product areas, and any quick view modals that exist.
To enable color swatch images set your Product variant style to: Swatches and check the Show custom swatch images option.
Step 2: Name your product options
To show color swatches you will need to name one of the Product Options either Color or Colour.
By default, the color swatches will automatically pick colors from the HTML color chart, so if your variant color option is named Blue it will show the HTML color Blue ( here is a list of HTML colors).
If your color name does not exist on the list of HTML colors it will default to white, this is where custom color swatches are needed. Or if the color isn't quite accurate you can override the automated color by adding custom color swatches.
Step 3: Create the images and name them accordingly
Take a small 50px x 50px screenshot of the product where you can see a good proportion of the color. Save this image and rename it based on the following rules:
The name of the image must be in lower case and must correspond to its color variant. The image must also be a .png file type.
Image names must contain no spaces or special characters, if the variant color uses 2 words replace the space in the image name with a hyphen.
- If the color variant is called Light Grey save the image as light-grey.png (Note: Lowercase with spaces replaced with hyphens "-" ).
- If the color variant is called White/Black save the image as white-black.png (Note: Lowercase with slashes / replaced with hyphens "-" ).
- If the color variant is one word like Gold save the image as gold.png (Note: Lowercase).
Step 4: Upload the images to your store
Upload the images to your Shopify dashboard by opening your Shopify admin and choosing: Settings > Files
Here you can bulk upload numerous files at once. Once uploaded these swatch images will display automatically across your store on your product pages.
If for any reason you do not see an image where you would expect to we recommend to double check the file name to ensure it is lowercase with hyphens replacing any spaces with a png file format.
Any deviation from that will mean that the image will not be shown.
For legacy theme versions: Installed before January 2021 You might need to upload the images to your themes Asset folder instead. If in doubt please reach out to our theme support team for confirmation. If this is required follow these steps:
Go to: Online Store > Themes, next to the theme click the actions dropdown and select Edit Code. On the next page in the left sidebar click on the Assets folder and click Add a new asset. Upload each png swatch one by one.