Display color swatches on collection page filter in Dawn theme

Shopify Discussion

Topic summary

Goal: show color swatches in the collection page filter (Shopify Dawn + Search & Discovery).

Key points and solutions:

  • Native support: The Search & Discovery app does not natively render color swatch filters; third‑party apps were suggested (e.g., Searchanise, which supports custom image/pattern swatches and “color families”).
  • Code workaround (working for many):
    • Create a Color metafield, populate product values, add it as a filter in Search & Discovery.
    • In facets.liquid, set the SVG rect fill to value.label when filter.label == ‘Color’. Works for generic English color names only.
    • Limitations: non‑English color names may render wrong/black; consider uploading swatch images (assets) or using metaobjects with hex codes. Some wanted larger swatch shapes (requires more template/CSS changes).
  • Alternative: Single-line text metafield using inline HTML span with background-color; may require theme code to render HTML safely.
  • Metaobjects/hexcode flow: A no‑code tutorial was shared, but one user (Dawn 13) couldn’t select “display” in S&D; unresolved pending screenshots.
  • Localization tip: If product card swatches don’t appear, set variant_option_name to the localized word for “Color” (e.g., “Farbe”).

Artifacts central: code snippets, screenshots, and YouTube guides. Status: no official native solution; thread remains open with workarounds and app options.

Summarized with AI on December 12. AI used: gpt-5.
16

Hi! Thanks for the code!

I have the same issue but as my colors are not written in English, the color swatches appear in black.

(I am no expert in code so please excuse my simple questions :))

My metaobject states the “color” items as, for example, “display name” = Azul and “hexcode” = #hexcode

I have tried some changes to the metaobject “color”:

  • If I change the metaobject item display name to “blue”, the color swatch appears as a very bright blue (I would assume that the code reads the blue color and provides a general tone for that)
  • If I change the display name to the hexcode, the color swatch correctly assumes that color, but the name next to the select checkbox is the hexcode (when it should be “Azul”, the metaobject display name)

Is there a way to change your code so that the checkbox delivered the hexcode of that metaobject and the display name would stay intact?

Thanks a lot!!!