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

This feature is not available for all customers yet.

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 a 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

Instructions

1
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-shape: 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 (-). 
        => The files' names should be neck_line-round.png, neck_line-v-neck.pngThe files' names should be neck_line-round.png, neck_line-v-neck.png

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

2
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.