Skip to main content
All CollectionsToolSwatch Settings
For dev - How to use Hex color for Swatch filter option
For dev - How to use Hex color for Swatch filter option

In this article, we show you how to use Hex color for Swatch filter options.

Connell Nguyen avatar
Written by Connell Nguyen
Updated this week

πŸ“– 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.


Instruction

1. Go to the boost-pfs-custom.scss.liquid file.

2. Add each style for each filter option value. For example: with the color "Jet Black", the code will look like this:
​

.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 contact our dedicated support team at [email protected].

Did this answer your question?