How to display swatches in the filter?

CASE 1: Create Swatches by Product Option

Suppose that you created a Swatch filter option like this:

This filter option has three values: Black, Blue and White.

Step 1

Create a list of PNG files corresponding to the above values with the following rules:

- File name:  "color-" + filter_option_value + ".png"

  Ex: color-black.png, color-blue.png, color-white.png

  For the values like "Multi-Color", "Black & White", the names would be color-multi-color.png and color-black-white.png

- Recommended size:  34x34 

Step 2

Upload the above files to your store in Shopify. ( Click here to see how to upload files)

CASE 2: Create Swatches by Tag

With this case, you can create swatches for any conditions like Dress Length, Neck Line, Sleeve Length,..

Suppose you create swatches for filter option "Neck Line" like this:

Step 1

Assign tag with the following format to your products: 

    neck-line:neck_value

For example: neck-line:o neck, neck-line:v neck, neck-line:golf

Step 2

Go to our admin app and create a filter option with the following information:

Step 3

Create a list of PNG files corresponding to the above values with the following rules:

- Remove the prefix (neck-line:) from filter option values.

- File name:  "neck_line-" + filter_option_value + ".png"

  Ex: neck_line-o-neck.png, neck_line-v-neck.png, neck_line-golf.png

- Recommended size:  34x34 

Step 4

Upload the above files to your store in Shopify. ( Click here to see how to upload files)