How to add color swatches in color filter option

You can add color swatches in your shopify store and display in your filter tree in the collection page. The hierarchy of the app is that : first it searches the .png image with the name of the color. If the store does not contain the image then it searches for the background color in your shopify store. If the store does not contain the color then it saves the swatch as blank. For example, for the color red, app follow the following hierarchy. 

Instructions to add image as swatch:

Let's replace the gold color highlighted in bellow image with an image in the swatches. 

Step#1: Prepare PNG image for color Swatch

Create a PNG file corresponding to the gold color with the following rules:
- Name of the PNG file should match with the color name, If color name contains space then replace that space with a hyphen in the PNG file. 
Examples: For "red" color we need a "red.png" file, and for "Soft Pink" color we need a "soft-pink.png" file.
- Keep .png file name as all lowercase
- Recommended size: 34x34

As we want to replace "Gold" color with the image, so we created "gold.png" file.

Step #2: Upload image for swatch

Upload the above files to your store in Shopify.
- From your Shopify admin, go to Settings > Files, click Upload files.

- Let's upload gold.png file created in previous step: 

View swatch result

Once we uploaded the gold.png image then it replaced the solid gold color with the image as highlighted in the bellow screenshot. 

You can upload image for each blank swatch.