How to add color info onto the Product Grid screen?

[JCaloBC]

Hello,

I want to add the color info onto the Product Grid page in Dawn.  As is I can only add the color in the Product page, but that doesn't show on the main Product Grid.  Does anyone know how to do this?

Thanks so much!

Jenni

[Shadab_dev]

Are you talking about the color swatches on the collection pages?

See reference client site: www.kpsclothing.in

This has image on the swatches i stead of colours but represents colors only. 

One more example: hiroclark.com

Best

Shadab

[JCaloBC]

I should have been more specific.  On the Product Grid it shows the Title (Product), and the brand.  I would also like to add what color the item is.  I don't want to set these up as color variances.  Just basic info to be seen on the product page.  

[Shadab_dev]

That is going to be much easier than what I assumed earlier.

You can create a metafield for this with a single line input as the field and add the name of the colour to each product from the backend. 

You can then render that on the product card on the appropriate place with this code

{{ custom.metafields.the_name_for_the_metafield }}

Change this the_name_for_the_metafield to the name you set for the metafield. 

[JCaloBC]

Hi,

I'm sorry I thought I responded.  Where do I add the metafield?  

[Shadab_dev]

It's card-product.liquid file from the code editor. 

Suppose you want to add it above or below product title just look for where product title is displayed and the code

[JCaloBC]

I add the code but I don't see the metafield added to the product card when i'm on the product grid page.  I'm just not understanding this.

[JCaloBC]

see attachment

[Shadab_dev]

You kind of copied my code exactly like that. Change this part of my code the_name_for_the_metafield to the name you set for the metafield. 

You have to create a metafield in the Shopify admin. You will find that under under settings and custom data. Create a product Metafield, name it anything you want with field type of single line text. Then go to each product and add the value to that field, you will find that metafield field created on each product. 

Then add the code, and make sure you add the code below title div in card-product.liquid file. So search for product-title and add the code below it. 

Let's say for example you named the metafield product-color then the code would be like 

{{ custom.metafields.product_color }}.

Hope you get this, else you can share Collab access with me, I can add the code for you. 

Best

Shadab

[JCaloBC]

That worked!!! Thank you so much Shadab!!

[JCaloBC]

I spoke too soon.  It DID work but now the info has disappeared. 

[JCaloBC]

Here's a collaborator code:  3515

[Shadab_dev]

Will need the store url as well to send the Collab request 

[JCaloBC]

Sorry, it's www.boncoeur.net

[Shadab_dev]

Request sent

[JCaloBC]

Request approved.  Thank yoU!

[Shadab_dev]

Sorry about this but I don't seem to have access still. I believe this could be a lag or something. Another client of mine is experiencing somewhat similar where she is not shown the request on the dashboard to be approved.

I will try sending another request. You can also just invite me to your store with my mail id. That would be much better with this issue.

[Shadab_dev]

Hey, I got it. The approval email just came in late. 

[JCaloBC]

Yes, I'm sorry.

[Shadab_dev]

Hey, which metafiled is it? Is it the color/scent metafield?
Also where do you need it on the product card like for example above the price, below the price or title?

I have added the code, for the color metafield if you now see the product grid you will see the color under the vendor.  Please see the April month version of dawn. I am making changes to duplicate now once we are on the same page, will shift it to the live one.

[JCaloBC]

No, it's the Product color metafield.  I want the color name to show after the title but before the Brand name.

[JCaloBC]

Just looked at the April version.  Per above, price before brand.  And if it cold be the same or on font size down from the title font size.

Thank you!!

[Shadab_dev]

Done, its between the title and vendor or brand name and the size and look and feel is like the title.