📖 Swatches are thumbnail images representing colors, patterns, etc. of product variants. Swatches on e-commerce websites can enhance the user experience by providing better visual information and helping customers navigate the right products faster.
💡 Swatch settings apply to Filter swatch only
In Boost, Swatch settings affect only the Filter swatch in your filters.
They do not change:
Product item swatches (on product pages)
Product grid swatches (collection/search results)
Quick view swatches
To configure those other swatch types, use their specific theme or app settings.
Enable swatch settings
⚠️ Filter option values with more than 30 characters will not be listed as a swatch value in Swatch settings.
You can enable swatch settings when setting up filters for titles, heights, colors, sizes, and filters using tags and Metafields.
To integrate swatches in those filters
From the app’s admin, go to Filter > Filter trees.
Click the filter tree that you want its size/color/height/title/tag/Metafield values to be displayed in swatches.
Click Add filter option.
Select Color/Size/Height/Title/Tag/Metafield in the drop-down of Option Type.
Select Swatch in the drop-down of Option Display.
Select your preferred swatch style in the drop-down of Swatch Style.
Click Save on the Edit filter option page.
Click Save on the Filter options page.
Check how new settings appear on your storefront.
How to customize the Swatch item element
Please follow this article to learn more.
One-color swatch and two-color swatch
To customize the swatch color
1. Please ensure you have enabled the swatch settings for the Color filter option.
2. From the app’s admin, go to Settings > Swatches.
3. Find the swatch name that you want to customize its displayed color.
4a. In Option Display, choose One color.
Under Swatch value, pick the shade on the color wheel (or enter a 6‑digit hex code, e.g.,
#1A73E8).Click Save.
💡 If you are familiar with CSS, you can use Hex color to display the Swatches:
1. Find boost-pfs-custom.scss.liquid file.
2. Add each style to 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;}4b. In Option Display, choose Two colors.
Under Swatch value, set both colors:
Use the two color pickers, or
Enter 6‑digit hex codes (e.g.,
#008000for green,#FFC0CBfor pink).
5. Click Save swatch settings.
6. To filter the Swatch value, in the drop-down menu of Swatch value, select:
Any: Shows all swatch values (chosen by default).
Complete: Shows all swatches that are completely set up and contain valid swatch values.
Missing: Show all swatches that are not completely set up and have no valid swatch value.
To merge color values and show the right swatches
From the app’s admin, go to Filter > Merge values.
Click Add new merged value.
Select Color in the drop-down menu of Type and click Add new merged value in the Merged values section.
Under the Merged value heading, enter the color phrase merged by two values. In the example above, you can enter Black and pink.
Under the Current values heading, select two corresponding colors that you want to merge into the one you have entered in step 4.
Click Save.
From the app’s admin, go to Tool ⚙️ > Swatches.
Find the swatch name which is the merged value created in step 4. Select Two colors in the drop-down of Option Display. In the Swatch value section, place your cursor in the color wheel to choose your desired colors or enter the six-character hexadecimal values of those two.
Click Save swatch settings.
Display swatches in filters created by product tags and Metafields
Add custom images to swatches (tags or metafields)
Before you start
In Boost → Filters → Filter trees, create your filter with Option type: Tag or Metafield and Option display: Swatch.
On the storefront, these values will show as blank swatches until you add images.Prepare images: square PNGs, 34×34 px recommended. Name files after the value in lowercase (e.g.,
crew.png,v-neck.png).
Steps
In Shopify admin → Settings → Files, click Upload files and upload all images.
Click the Link button beside each file to copy its URL.
In Boost → Settings → Swatches, find the swatch name you want to customize.
Use the Swatch value dropdown next to the search box to locate values faster.
Set Option display to Image.
Paste the Shopify file URL into Swatch value.
Click Save swatch settings.
Repeat for all swatch names you want to replace, then check your storefront.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.