How to display Swatches in the filter (App Lib V2)

Attention: The current document only works with the new front-end lib from Boost Commerce. Please read this document first to know if you are using the latest version.

After creating a filter option by Product option/ Product Tag with Option Type is Swatch, the swatch filter option will display Basic colors such as black, blue, brown, grey, green, etc. 

For better customer experience, we recommend using your own Custom color or Custom icon swatches that accurately reflect your products.

Basic Color Custom Color Custom Icon

shopify color swatches

shopify swatches shopify swatches app


Create a list of PNG files corresponding to the above values with the following rules:
  • File name: filter_option_label + "-" + filter-option-value + ".png"
    • filter_option_label is the value of Option Label.
    • filter-option-value is the values of a filter, for example Coral, Multi-Color, O-neck, etc.
  • Keep it all lowercase
  • Recommended size: 34x34
  • Examples:
    • A filter option has Option Label named Colour has one-word values Coral, Mint => The file's names should be colour-coral.png, colour-mint.png
    • A filter option has Option Label named Colour has multi-word values Multi-Color, Black & White, Red Wine => The file's names should skip the blank space, replace the special character with (-) and connect the words with (-).  They should be colour-multi-color.png, colour-black-white.png, colour-red-wine.png
      shopify swatches app
    • A tag filter option has Option Label named Neck Line with prefix neck-line: has 2 values Round, V-neck
      •  The Option label should replace the blank space with (_)
      • The name of filter-option-value should skip the prefix & the blank space, replace the special character with (-) and connect the words with (-). 

        => They should be neck_line-round.png, neck_line-v-neck.pngcustom color swatches shopify

    If your  Option Label has special characters, please reach out to to find its proper name for your files. 

Upload the above files to your store in Shopify.
  • From your Shopify admin, go to Settings > Files.
  • Click Upload files.
  • Select one or more files to upload. Click Open (Click here for more details on how to upload files).
The Swatch images are cached to optimize the loading speed. After changing the images, you could access Filter > Filter settings > click the "Clear cache of Swatch images" button to clear this cache to have the Swatch images updated.

Still need help? Contact Us Contact Us