How to display swatches in the filter?

The Product Filter & Search app supports many filter options, two of which are: color swatches and product icons. In this guide, we'll go over how to do both.

  • Note: Adding any of the two filter options will require the filter cache to be cleared for the changes to take place. (We'll show you how to do that towards the end).

Color Swatches

Adding color swatches to your search filter allows your customers to find items by color. 

By default basic colors such as black, blue, brown, grey, green, etc. are supported:

For a better customer experience we recommend using your own customized color swatches that accurately reflect your products:

How to add basic color swatches

1. Go to the Product Filter & Search app.

2. Pick the filter tree you want and click Edit on the right.

3. Click Add filter option.

  • For Option type choose Color.
  • For Option display choose Swatch.
  • For Option value choose All Color values.

4. Click Save.

5. Click Save filter tree.

How to add custom color swatches

1. Follow the steps for adding the basic color swatches above, but change  Option value to Manual

2. Type in your custom color swatch names under Manual values.

  • Note: The custom color swatch names are determined in your Product variants:

3.  Make a .png file (recommended size is 34x34 pixels) of your custom color swatch to pair with the names:

4. Save the .png file using these guidelines:

  • Keep it all lowercase
  • Add "color-" in front of the color name

Example:

  • If your custom color swatch is called, "Sea Blue" then the .png file name would be "color-sea-blue.png."
  • If your custom color swatch is called, "Black & White" then the .png file name would be, "color-black-white.png."

5. Upload the .png file to Shopify ( how to upload to Shopify).

Once you upload the color swatch .png file you'll need to clear the filter cache for the changes to take place (shown below). 

Product Icons

Product icons give your customers a visual representation of what they can filter products by. In this example we'll show you how to create product icons for three necklines:

Adding the correct filter option:

1. Add a new filter option

2. Under Option type choose Tag

3. Under Option label type in "neck-line"

4. Under Option display choose Swatch.

5. Checkmark "using prefix"

6. Under Filter the tags by a prefix, type in "neck-line:"

After adding the correct filter option, you'll need to do 2 things:

  1. Assign the prefix tag to your products.
  2. Create a .png file to associate with those tagged products.

Assigning the prefix tag to your products

For these necklines, we'll go to each relevant product and add a tag using this exact format:

  • neck-line:neck_value

For example:

  • neck-line:o_neck
  • neck-line:v_neck
  • neck-line:golf

Create a .png file to associate with tagged products

1. Make a .png file (recommended size is 34x34 pixels) of your product icon.

2. Save the .png file using these guidelines:

  • Keep it all lowercase
  • Add "neck_line-" in front of the neck value name
  • If the value name has a space in between, use a "-" (dash).

For example:

  • neck_line-v-neck.png

5. Upload the .png file to Shopify (  how to upload to Shopify).


How to clear filter cache

1. Go into the Product Filter & Search app

2. Click Settings at the top

3. Scroll down and click Clear Cache

4. Finally,  click Save Settings.