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.
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|
- File name:
filter_option_label+ "-" +
filter_option_labelis the value of Option Label.
filter-option-valueis the values of a filter, for example Coral, Multi-Color, O-neck, etc.
- Keep it all lowercase
- Recommended size: 34x34
- 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
- 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.png
If your Option Label has special characters, please reach out to firstname.lastname@example.org to find its proper name for your files.
- 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.