Color swatch for filter option
Instead of a plain checkbox list, a color- or pattern-based filter option (like 'Color') can display visual swatches — small color chips shoppers can click...
What this does
Turns a plain checkbox list for a filter option like Color into small clickable swatches — instead of a checkbox reading "Blue", shoppers see an actual blue color chip (or, with Swatch - Text, the chip plus the word "Blue" next to it). That lets shoppers scan and pick colors or patterns visually rather than reading down a list of names, which matters most on options with many similar-sounding values (e.g. "Navy", "Midnight Blue", "Royal Blue" are easier to tell apart as swatches than as text).
Show color swatch for a filter option
Open the filter option — see Configure filter options.
Under Display type, choose:
Swatch — color chip only.
Swatch - Text — color chip with the value's text label next to it.
Under Swatch size, pick a size: 32×32, 48×48, 64×64, or 80×80 px.
Under Swatch mode, pick a shape: Squares or Round.
Click Save in the bar at the top of the page.
Assign colors to values
Go to Settings > Swatch (under Catalog in the Settings menu) — or click Color swatches on the Filters page, which opens the same page. Values are grouped by source (e.g. "color"). For each value, set which color it displays as and the display name shown to shoppers. Values that don't have a color set yet are flagged (e.g. "273 missing").
Choose how each swatch value should be displayed, whether as a color code, an image, or dual colors. For color codes, use valid hex values (e.g., #FF0000 for red). For swatch images, keep the image size small and square for better display.
Important: Make sure your product options are labeled consistently (e.g., "Red", not "red" in one product and "Red" in another).
Let the app suggest colors automatically
Click Auto-fill with AI to have the app suggest a matching color for every value at once instead of setting each one by hand. Review the suggestions before they're applied.
Bulk import/export swatches via CSV
For large value lists, or to prepare swatch colors outside the app, use Import / Export on the Swatch page.
Related pages
Last updated
Was this helpful?