In this article, we will discuss “How to fix the color swatch issue in Shopify”. Mostly, Shopify themes provide a color swatch feature on the product and collection page. Color swatches replace the traditional dropdown for variant option color. However, if you are using some color names that are non-standard (like “Ivory”, “zebra black”, “denim blue” for instance), you will realize the color swatch appears white, as per the given screenshot.
Steps to fix the color swatch issue
The basic reason for the issue, the theme can’t guess which color to display. To make it work, please follow the given steps.
- You have to create your small image for the color and size should be (64px * 64px).
- Name the image according to the name of the variant color but keep the filename in lowercase and replace any spaces in the name with a hyphen. For example:
- A variant named: Ivory requires an image named: ivory.png.
- A variant named Zebra Black requires an image named zebra-black.png.
- When our images are ready open your Shopify admin, click on the Settings tab and open the area named: files.
- Upload your images to the files area, this will make them accessible for your theme. After uploading the color swatch images.
Let’s test our product page
Check the following screenshot, the color swatch working fine. It’s showing ivory and denim-blue color.
Conclusion
In this article, I tried to explain to you “how to fix the color swatch issue in Shopify”. I hope, you like this article. Please feel free to ask your questions in the comment area. Also, share your feedback too.
Keep learning & stay safe 😉
You may like:
How to Manage AWS Lambda Versioning and Aliases
How to Deploy Angular App on Firebase
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee