How can I filter by product color in version 2.0 without using variants?

[vaubeo]

Hello!

how can I define the Color of a simple product in 2.0? In the old version it was possible to do this by using a tag (depending on the theme). Now it is only possible to filter the colors of my products with color variants. For example: black dress simple product, T-Shirt blue and red variant: the filter will only show blue and red, because the black dress has no variant. But I want my customers to be able to filter by the Color of every product and not just the products with variants. I tried to define the color in the metafields, but I don’t know if I have done this correctly- there is no color swatch in my filter sidebar. If I can’t define the color metafield for this, I don’t know how I can use it correctly. Does anybody have an idea how I can solve my „simple-product-color-filtering-problem“ without using a third party app? 
thank you! 
vicky

[Genejack9to5]

Same problem I am facing and thought there will be an easy answer on the community forum. 😞

[vaubeo]

I think this could be easily solved by Shopify. The Color could be treated like a simple product information. Similar to price information. And with an general switch whether you want to display the color swatch for simple products (without variants) on your productsite or not. But I could be totally wrong, and this is too hard to code 🤷‍♀️

[vaubeo · Accepted solution]

Hello! I just had a long support chat with Shopify, and I am very proud, that the support and I found a solution together. I wanted to share with you what we found out, since you are facing the same problem.

You can select only one color per product. But the support told me, he found out, that many Shopify users have this problem since 2.0 and if its possible, Shopify will be updated to fix this problem completely. After the update you can choose more than one color for your product. But at the moment you can only define one color.  I hope this is helpful for you, it worked for me. My Shopify is in german, and i am german, so please excuse me, if my english is not perfect 🙂 I do my best for you 😉

try this:
1) Set up you color swatches by uploading th colors as a .png them into your files.  be sure to name your pngs correctly as you need them. you will need the name of the png later to display the color correctly in your filter. 
2) Set up metafield: create a new single-line text metafield for products. Don't use the color picker, use text. this is important!

you can add additional rules to define your color names already in metafields. Type in all the color names separately (one line for each color) this will see you time, when you define the colors in your products.

3) go to your navigation. in 2.0 you will find a new field named "Filters" underneath the menus. 

Add a filter. Now you can add the metafield in your filter. Select the one you just created.

4) go to the products where you want to add the color. scroll down. you will find the metafield you just created. find the right color in the dropdown list you just created. save product. 

Now open your shop. Your filters should show the color swatches and you should be able to filter by color, as easy as it was by tags. 🙂 

let me know if this is understandable for you and if this worked for you. 

vicky 

[Genejack9to5]

Vicky, you are an angel 🙂

I followed your instructions and it actually works !! have a look at this collection page of my website! WOW!

https://genejack.com/collections/bags

I will even start adding more metafields for styles, fitting..etc

Thank you so much, you made my day 🙂

Kind regards

Yas

[Mahalakshmi]

I have seen your website. Wonderful to see color swatches. 

I tried to implement the same. But I am not getting png images on filter view.

Please help me.

Thanks

[studiomatrix]

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

[Mahalakshmi]

I tried to implement the same. But I am not the getting png images on filter view.

Please help me.

Thanks

[Genejack9to5]

Let's take example of color 'red'

Step1: Create a file for red color swatch, file name Red, file format png, file size 32 x32 px

Step2: Settings > Files: upload the file

Step3: Settings > Metafields > Products > Add Definition

Name: Color > Select content type Text > Single Line text > Save

Step4: Products > Select any of your products > scroll all the way down you will find a new section called Metafields and a new line called Color > enter the name Red

Step5: Sales Channel > Navigation > You will see Filters Section > Add Filter > Add Color Metafield

Step6: Go to your website and check the filter 🙂  if it works then repeat step the steps for all the colors you wish

Kudos to @vaubeo for finding this out

[Mahalakshmi]

Thank you so much for your immediate response. Hats off.

Did as per your steps:
Geting color name but not PNG.

https://chettinad-thari.myshopify.com/collections/chettinad-cotton-sarees

Please help me.

[Genejack9to5]

I think your theme might need an additional step for complex colors :s

To narrow down the issue, why dont you try first straightforward color such as 'Blue'? if this works then probably complex swatches could be looked at separately

For standard colors I didnt face any issues, for complex colors I had to define one more step on my theme (sorry I missed this in my previous reply)

Let us know if standard colors will show correctly to you

I attach some ready swatches if that could help

BlackBlueBrownDesert CamoGreen CamoGreenGrey CamoGreyMulti ColorOrangePinkRedWhiteYellow

[Mahalakshmi]

Thank you so much. Now it is working fine.

One more request.

Is it any way to remove colour name like this https://genejack.com/collections/bags 

Thanks

[KingManon]

I am struggling with the same as you, only "red" and not a red color. Can you inform which extra steps you took?

[mtruffa]

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?

[Mahalakshmi]

Thank you so much. Now it is working fine.

One more request.

Is it any way to remove colour name like this https://genejack.com/collections/bags 

Thanks

[MondayForward]

@Genejack9to5

Hello! I implemented the metafeilds and added the current values to my produces but I still can't get the actual color swatches to show... all it shows is the actual color name... no image/swatch. I also notice you have some theme setting called "Color Swatch". I do not have this I am using the Ira theme. 

Is a specific theme required for this to work? I noticed Mahalakshmi got this to work as well, but I'm not sure how... Any help would be greatly appreciated. 

[unofficial2321]

How dawn theme does not have the color swatch option in theme setting. It shows only name not the color swatch

[HDK]

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.

[danedeon]

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.

[malcolm_vernon]

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. 

[malcolm_vernon]

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..

[trialnerror]

Hi there

I tried all the step but the colour swatches still isn't showing up on the collection page, just coming up with words.  Does this work only for certain themes. I have Ira 4.0 theme

[Addison99]

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

[King-Kang]

Hello @vaubeo ,

Can you please clarify the second step?

"2) Set up metafield: create a new single-line text metafield for products. Don't use the color picker, use text. this is important!

you can add additional rules to define your color names already in metafields. Type in all the color names separately (one line for each color) this will see you time, when you define the colors in your products."

Where should I type all the color names?

Thank you

[King-Kang]

I have found it,

When you are creating the metafield, after selecting the "Text" option, in the "Validation" tab, and checking the box "Limit to preset choices", becomes available the option to add more items. - problem solved here.

But the colors are not showing up, only the names. I have tried these options "examplecolorname.png" and the link itself that directs to the import file, none of them worked.

Any hint?

Thank you

[vaubeo]

Hi, 

When you create the options in the metafield you should not name it „color.png“. Just „color“.

The .png is only important for your Color files (means the color swatches) which you have to import to your files. It is important to have your swatches as a .png and not as a .jpg

i hope this helps 

vicky 

[MauriceAB]

Hi, you might have an answer to this one as well.

What if I'm selling a t-shirt which is made of two colors. Is it possible to show the product when selecting e.g. Red, but also when selecting Blue? (when it's a blue/red shirt)

Cheers,

[Genejack9to5]

Hey, this is something we tried to achieve and for long time we kept researching , unfortunately we do not see this as a standard option at all and can not be achieved without a 3rd party app. There a couple of decent applications who can do this by grouping different products as variants i.e. you create a blue tshirt and red tshirt as separate products then use the app to combine them as variants. This way you have 2 products displayed and both display the color variants without messing up with you SKU count

Hope this helps

[neatproducts]

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.

[ZENKON]

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 ...!

[TimAU]

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?

[vaubeo]

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.

[TimAU]

likewise just a shop owner, thanks for the feedback.

[vaubeo]

Thank you and sorry that i can’t you more...

[studiomatrix]

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

[NYCK]

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   

[AzureMinion]

If I understand your questions correctly you wanted a color filter that filters products with multiple selection capability. If the default theme filter cant handle it, I would recommend using an app like https://apps.shopify.com/ultimate-search-and-filter-1. You can easily add a Color filter using tags by selecting Tag from the filter type in the Edit Filter form then enable the Multi-selection mode. You can also use product options as colors and the app will show the correct variant image when user selects a color.

[irene-apparel]

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.

[Dela12]

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?

[Schoi]

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.