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

By default, you need to upload each image which is corresponding 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.


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;}