What is a color swatch?
A color swatch is a small chip that shows a color or pattern itself instead of naming it in text. In a filter, shoppers click the chip rather than guessing what Moss means. On a product card, a swatch row shows every available color at a glance, before any click.
Why do color swatches work better than text?
Color is visual; a word is a translation. Say your throw pillow filter lists fourteen color names, five of them green: Emerald, Fern, Sage, Pine, Moss. A shopper hunting forest green decodes all five by name. A swatch grid turns those fourteen reads into one glance, and she clicks the green that matches the sofa photo on her phone.
Image swatches go further for patterns and materials. Floral, Herringbone, or Walnut mean little as words. A thumbnail of the print answers the question before the shopper asks it.
On Shopify stores
Shopify saves color as a plain variant option value, so the default rendering is text: a dropdown or a row of word pills. You add an app to map each value to a real color or an image, then show it in filters and on product cards. The honest cost is the mapping itself: a catalog with "Navy", "navy blue", and "Dark Blue" scattered across products needs a cleanup first.
Related terms
Color swatches with Sledge
Sledge filters support color and image swatches. A color value becomes a chip of that color, and a patterned fabric becomes a thumbnail of the fabric, so shoppers filter by what they see, not what they decode.
14-day free trial · No code · Works with any theme · Uninstalls clean