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


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 => The file's names should be colour-multi-color.png, colour-black-white.pn
    • A tag filter option has Option Label named Neck Line with prefix neck-line: has 2 values Round, V-neck => The file's names should skip the prefix. They should be neck_line-round.png, neck_line-v-neck.pnghttps://s3.amazonaws.com/helpscout.net/docs/assets/590652f62c7d3a057f88b05d/images/59e847cc2c7d3a055035bd42/file-5Aqksil9Gx.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.

Still need help? Contact Us Contact Us