For dev - How to use Hex color for Swatch filter option

📖 By default, you need to upload each image that corresponds with each filter option value (as instructed in this guide). If you are familiar with CSS, you can use Hex color to display the Swatches.

On this page


Go to the  boost-pfs-custom.scss.liquid file.
Add each style for each filter option value. For example: with the color "Jet Black", the code will look like:
.boost-pfs-filter-option-item-list-swatch span.boost-pfs-filter-option-swatch-image[title="Jet Black"] {background-color: #111111 !important;}

If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at