How dawn theme does not have the color swatch option in theme setting. It shows only name not the color swatch
Topic summary
Goal: enable color filtering for simple products in Shopify 2.0 without using variants, ideally with color swatches in the collection filter sidebar.
Workaround steps (successful for some themes):
- Upload 32x32 PNG swatches to Files, named exactly as your color terms (e.g., Red.png, Blue.png).
- Create a product metafield: Text, Single line; add preset choices via Validation (limit to preset choices) to standardize color names.
- Assign the color value to each product via the new metafield.
- Add the metafield as a collection filter (Navigation > Filters or via Shopifyâs Search & Discovery app).
Limitations and theme dependency:
- Currently only one color per product is supported; Shopify support indicated a possible future update for multiple colors per product.
- Many users report swatches do not render (only text) on themes like Dawn, Ira, Empire, Symmetry, Impulse, Showcase, Masonry; swatch display appears theme-dependent and not automatically linked to PNGs.
- Multi-color products (e.g., red/blue) and multi-selection filtering generally require thirdâparty apps (e.g., Ultimate Search & Filter) or variant-level setups with Search & Discovery.
Status: mixed results; some confirmations of success, many unresolved issues about swatch rendering and variant filtering. PNG swatch assets are central to implementation.
Got the same problem here: (text)-filter, but no images. I guess you need a theme that supports images? Neither Dawn nor Empire or Symmetry seem to do so.
1 Like
This doesnât work for me either. If you follow the steps there doesnât seem to be a point where the metafield item âredâ (for instance) is linked to the image âred.pngâ. The assumption seems to be it just figures out the image is meant to be displayed and does it automatically. Which it does not.
Itâs not linked to the image. If you create a product meta field it will be added on the bottom of your product edit page.
Guys also if you want different pictures to show up for each color, itâs better to create a Variant meta field called color. and add variations for all the colors you want as preset rules. Then you will see the option come up on the bottom of your variets. Then when you select the filter, the product will appear with the right color picture. You will also need the Search & Discovery app from shopify to format your filter correctly. Im not sure about the color swashes though..
I am struggling with the same as you, only âredâ and not a red color. Can you inform which extra steps you took?
Hi,
does anyone know if it is possible to add the same color metafield to the variant?
At the moment i have set it up with one color per item but the variants are not showing up because they dont have this metafield.
1 Like
Having the same problem here. When filtering colors, it only shows single products. How can we put a metatag to a variant ? I donât see any option, can only put the metatag to the product itself, not the variants 
We sell contact lenses, so sometime one design have several colors, when customer are searching for a color, I would like the variants to appearâŚ
If anyone can advise âŚ!
2 Likes
I have tried this and while I got the colour name I couldnât get the swatch colour to show up.
The Metafield name I used was Main Colour.
All my products with a Colour variation show up correctly, but I want to group colours to have just BLUE for colours like Navy, Light Blue etc and canât seem to be able to achieve this.
Perhaps I need some custom code to get this done?
Any help would be appreciated
How did you get it to work. I still show the color name. Is there a place to define/assign the name to the png filr?
It seems to work only with specific themes. I tried Impulse and Showcase. I know that my files are set up properly, since I see color swatches on product tiles and on product pages, so my png files are linked correctly to color names. But filters still display only the color name as text and donât show the color swatches.
Hi @vaubeo , Iâve tried this and followed all instructions twice and canât seem to get the swatches to show. This is my first play with Dawn so not really familiar with it yet. Iâve uploaded the PNG swatches to files and also to assets, just in case as i used to put them in assets on Shopify 1 sites. Any suggestions as to why they donât color/populate in Dawn?
Hi, I dont know if there is an update or anything else. I canât tell you, because this was months ago and everything what changes in between can cause that this wonât work anymore. I worked perfectly for me, and I know it is a little tricky and hard/advanced to do, but a cheap workaround. So sorry if this does not work anymore, but I can not find another solution. I am not a developer, I am just a shopify shop owner.
likewise just a shop owner, thanks for the feedback.
Thank you and sorry that i canât you moreâŚ
Anyone have a solution to this? Doesnât look like Dawn theme supports color swatches. I tried this, but still only get the text name in the color filters, not the color swatches. How else can I get around this?
Hi yas,
Your website and the color swatches looks nice and are identical as I need for my products! The explanation above was clear but unfortunately I still canât manage to choose 2 colors for 1 product.
I followed all the steps above but I have the following problems that occure:
-
If I make for each color a different metafield, I manage to choose different colors for every product but I canât manage to create 1 color filter. (see picture)
-
If I make 1 metafield with the different colors in, I manage to choose only 1 color/product.
I want, as you have on your website, to pick 2 colors for 1 product and to have 1 filter âcolorsâ with the different colors displayed in.
Can you help me? It would be really appreciated!
Thank you in advance!
Manon
Hi Vaubeo,
I have the same issue where I sell products that have 2 colors in it! The explanation above was clear but unfortunately I still canât manage to choose 2 colors for 1 product.
I followed all the steps above but I have the following problems that occure:
- If I make for each color a different metafield, I manage to choose different colors for every product but I canât manage to create 1 color filter. (see picture)
- If I make 1 metafield with the different colors in, I manage to choose only 1 color/product.
I want, as you have, to pick 2 colors for 1 product and to have 1 filter âcolorsâ with the different colors displayed in.
Can you help me? It would be really appreciated!
Thank you in advance!
Manon
Hi There
i am a bot confused , where do you upload the png ? can i choose generic png for the colors ?
i am selling shoes and many of the shoe colors are more a description , for example, Midnight Blue, Navy Blue, Sky Blue, Floral Blue etc⌠it would be crazy to list all the images since it will a very long list (we have few thousands of products ) i so we created something that called Map Colors , so the above example will all be under map color called BLUE , so i will use generic colors and i will create a FLOW automation to assign all my colors into Basic Color in METAFILED, so i did what you suggested and in Variant metafield definition i added a filed called Basic Colors and i added all the basic colors as a preset under Multi line text (since some colors will have Black & white, or Blue / Brown etc..)
so the only thing i need is where do i upload/ Or Choose the PNG image
Thank You
are there any additional steps for those who still only see the text color name instead of the swatch showing up? i have 2.0 compatible theme (masonry 6.1) but cannot get the png files to show alongside the text.