⚠️
Swatch settings apply to filter swatches, product grid and product item swatches.
Requirements
You already enabled swatches in a filter option (Option display = Swatch).
See: Display swatches in your filter tree(For image swatches) You have image URLs ready from Shopify admin > Content > Files.
Option display types in Swatches settings
Option display | Use it for | What you set |
One color | Solid colors | One color (picker or hex) |
Two colors | Multi-tone colors | Two colors (picker or hex) |
Image | Patterns, materials, icons | Image URL or upload |
Text | Size labels, short tags | Text value |
Update a swatch value
In the Boost app admin, go to Settings > Swatches.
Find the swatch name you want to update.
Tip: Use the search bar to locate a specific value faster.
In Option display, choose one of these:
One color
Two colors
Image
Text
In Swatch value, set the value based on your selection:
One color: pick a color (or enter a 6-digit hex code, like
#1A73E8)Two colors: pick two colors (or enter two hex codes)
Image: paste an image URL or click Upload
Text: enter the text you want to show on the swatch
Click Save swatch settings.
Check your storefront.
💡 (Boost V2) 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;}
Filter swatches by setup status
Use the Swatch value filter (near the search area) to review your setup:
Any: shows all values
Complete: shows values that have valid swatch values set
Missing: shows values without valid swatch values
Add image swatches for Tag or Metafield filters
If your swatch filter is based on Tag or Metafield, the swatches can appear blank until you assign images.
Before you start
In Filter > Filter trees, your filter option is set to:
Option type: Tag or Metafield
Option display: Swatch
Steps
In Shopify admin, go to Content > Files.
Click Upload files, then upload your swatch images.
Recommended: square images (PNG works best).
Keep filenames simple so your team can manage them easily.
Click the link/copy action for each file to copy its URL.
In Boost, go to Settings > Swatches.
Find the swatch name you want to update.
Set Option display to Image.
Paste the Shopify file URL into Swatch value.
Click Save swatch settings.
Repeat for other values, then check your storefront.
⚠️ File types
Boost accepts .jpeg, .jpg, and .png. Renaming the file extension isn’t enough—you must convert the file format.
Set swatches for merged values
If you merged values (for example, multiple color names into one value), you also need to set a swatch for the merged value.
Merge your values first. See: How to merge values
In Boost, go to Settings > Swatches.
Find the swatch name that matches your merged value.
Set Option display (for example, Two colors), then set your Swatch value.
Click Save swatch settings.
Check your storefront.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.