Hi, does anyone know how to add color swatches in filter option on collection page for Dawn theme. Not variants, need the swatches on filter (search and discovery app of shopify 2.0)

I was able to figure it out. Add color as a metafield and update values in products. Then add this metafield in filter of “search and filter” . Go to edit code>facets.liquid. Search for svg tag. inside rect tag, in Fill option replace “none” with below code. " {% if filter.label == ‘Color’ %} {{ …

Hi [email removed] Kk1212 It’s Stacy from Searchanise Team , the app that provides professional search and filter capabilities for Shopify stores. If you’re looking to display color swatches in the Dawn theme, one solution is to install the Smart Search Bar & Filters app. The app allows you to easil…

Helo Searchanize, I am interested to know if Searchanize has a color filter that has actual color swatches (rather than text) that can be customized to show the actual colors of the actual products (not a generic list with your colors). I would want this to be able to be customized by me so I can ad…

I tried this, but just the check boxes changed color - and when they are checked, they look weird. I actually want a larger swatch of color, which would need more code to make the shape and then fill it with color.

Dear Kk1212, I tried your solution and particularly it works :slightly_smiling_face: But the colors are wrong - only “orange” is correct. The other colours not. Can you tell me where I can find the settings of these colours and/or how to change it? Maybe the problem is the german language of my col…

Hi Mok, I’m sorry for the delayed answer. If I get it correct, you want to display actual product colors in swatches, don’t you? There is such a feature in Searchanise that allows you to download images for swatches displaying patterns (dotted, striped, snakeskin) or complex shades of color (gold, …

Hi I just tried this on Dawn 9.x and all of my swatches were coloured black instead of being empty or the correct color. I’ve followed all the instructions, checked them twice and not added the swatches to “files” but also to “assets” as some of the apps in the past have used the assets. Any ideas?

Hi @Carina13 Sorry for late reply. Yes it takes English names of the color only. There is another way where you have to upload swatch images of your color and you can call it as an image. In my store, I need to show body types png in filters. Body shape is the filter name which I have kept and chan…

Hi @TimAU Please check the code on Carina’s reply. Hope that will solve your problem

The built-in search and discovery app for Shopify 2.0 with the Dawn theme does not support color swatches in the filter options on the collection page. However, you can achieve this by adding metafield. Add color as a metafield and update values in products. If you want to show color swatch with co…

hi @ahsannsajjad what ‘type’ of metafield did you create, i tired single line text but literally got a line of code in text rather than swatch. thanks, Tim

Display color swatches on collection page filter in Dawn theme

Shopify Discussion

kk1212 October 17, 2024, 4:39pm 20

Can you share metaobject screenshot and search and filter>color screenshot as well.

YouTube video screenshot you are sharing is of search and filter section, while your store screenshot is of metafield.

Topic		Replies	Views
Color Swatch Collection Page (Dawn Theme) Store Design customizations , collection-page	1	87	January 20, 2023
How can I add color swatches filter on Dawn theme collection page? Store Design	3	58	December 3, 2024
Color families with swatches + preselected filters (Brand & Model) on collection and search pages Shopify Apps design , customizations	2	57	October 10, 2025
How can I add color swatches to product pages in the Dawn theme? Store Design product-page	39	1883	February 12, 2025
How to add color swatches to collection page in shopify? Store Design customizations , collection-page , metafields , shopify-themes , troubleshooting , html	17	175	December 4, 2024

Display color swatches on collection page filter in Dawn theme

Related topics