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

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

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
Basic Color	Custom Color	Custom Icon

Instructions

1
Create a list of PNG files corresponding to the above values with the following rules:
  • File name:
    • If filter option is built by Product option, the file's name should be: filter_option_type + "-" + filter-option-value + ".png"
    • If filter option is built by Product tag, the file's name should be: filter_option_label + "-" + filter-option-value + ".png"
filter_option_type is the value of  Option type
filter_option_label is the value of  Option label
filter-option-value is the values of a filter, for example  Coral, Multi-Color,  Black & White, etc. 
  • Keep it all lowercase
  • Recommended size: 34x34
  • Examples:
    • A filter option has Option type of Color has one-word values CoralMint => The file's names should be color-coral.png, color-mint.png
    • A filter option has Option type named Color 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 color-multi-color.png, color-black-white.png, color-red-wine.png They should be color-multi-color.png, color-black-white.png, color-red-wine.png
    • A tag filter option has an 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.png
        => The 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.