We have added support for custom image swatches in all our themes. If standard swatch colors are insufficient, missing, or inaccurate, consider replacing them with your custom images.
An example of this issue can be seen in the image below, here you can see Merel Blue is a custom color offered by the merchant but the color doesn't match the product.
Create the swatch image
Edit a product image to produce a square sample of the variant's color, pattern, etc. For this example, we are cropping a clothing product image to replace a color for the Merel Blue variant.
Crop or resize the image to 50 x 50px or larger.
Below you can see I cropped the image to get the correct color.
How to name the cropped image
The image must be named after the color option in lowercase and formatted as a PNG.
merel-blue.png
Use hyphens for spaces and special characters (e.g. top-green for Top green or freddie-s-fusion for Freddie's Fusion).
For one-word names, the formatting is the most straightforward:
If the color is Black, then name your image black.png
For multiple-word names, use hyphens to separate each word:
If your color is named Dark Blue, name the image dark-blue.png.
Like spaces, slashes and most other special characters are replaced with hyphens:
If your color is Blue/Gray, then name your image blue-gray.png.
How to upload the file on your store
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 swatch image(s).
That's it.
How to set the swatches we uploaded in customizer
Go to Online Store > Themes > Customize > Products > look for Color swatches > and for the swatches that will use images just write the swatch name.
As you can see in my case it was Merel blue so I just have added the name with : at the end and it showed fine on the frontend.
