Re: Color filter 2.0

Solved

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

vaubeo
Tourist
8 1 10

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

Accepted Solution (1)
vaubeo
Tourist
8 1 10

This is an 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 

View solution in original post

Replies 39 (39)

Genejack9to5
Excursionist
11 0 15

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

vaubeo
Tourist
8 1 10

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
Tourist
8 1 10

This is an 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
Excursionist
11 0 15

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
New Member
5 0 0

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
New Member
7 0 0

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)Schermafbeelding 2023-11-22 om 11.31.26.png
- 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
New Member
5 0 0

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

Please help me.

Thanks

Genejack9to5
Excursionist
11 0 15

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
New Member
5 0 0
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
Excursionist
11 0 15

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

Genejack9to5_0-1644489141546.png

 

BlackBlackBlueBlueBrownBrownDesert CamoDesert CamoGreen CamoGreen CamoGreenGreenGrey CamoGrey CamoGreyGreyMulti ColorMulti ColorOrangeOrangePinkPinkRedRedWhiteWhiteYellowYellow

Mahalakshmi
New Member
5 0 0

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
Visitor
1 0 0

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

mtruffa
Visitor
1 0 0

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
New Member
5 0 0

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
Tourist
3 0 2

@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
Shopify Partner
18 0 3

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

HDK
Shopify Partner
11 0 3

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
Shopify Partner
1 0 0

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
Shopify Partner
2 0 0

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
Shopify Partner
2 0 0

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
Visitor
2 0 1

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
New Member
11 0 0

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
Trailblazer
148 8 77

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
Trailblazer
148 8 77

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
Tourist
8 1 10

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
Shopify Partner
10 0 11

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
Excursionist
11 0 15

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
Visitor
1 0 1

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
Tourist
4 0 2

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
Excursionist
28 0 6

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
Tourist
8 1 10
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
Excursionist
28 0 6

likewise just a shop owner, thanks for the feedback.

vaubeo
Tourist
8 1 10
Thank you and sorry that i can’t you more...
studiomatrix
New Member
7 0 0

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)

studiomatrix_0-1700727790158.png

 


- 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
Excursionist
46 1 2

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
Shopify Partner
28 0 1

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
Tourist
11 1 3

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
Shopify Partner
4 0 3

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
Visitor
1 0 0

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.