Adding a metafield to product card in collections

[atacox2]

Hi all,

Is there a way to add a meta field to the product cards on the collection page? I was hoping to add it above the price or alongside it. Picture for reference. Thanks in advance.

[BSS-Commerce]

Hi @atacox2 ,

Please follow these steps:

- Online Store => Themes => Edit code

- Find the file card-product.liquid

- Find the code

{% render 'price', product: card_product, price_class: '' %}

- Add the metafiled you want to display below the above code similar to the following example:

{{ card_product.metafields.custom.tex }}

 The above code will display the "tex" metafield

- Will display on the page as "123"

Result:

Note:

With metafield product.metafields.custom.tex will correspond to the code when added to the card-product.liquid file is {{ card_product.metafields.custom.tex }}

[atacox2]

I'm inputting the below and did so with .tex and neither worked

{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
{{ card_product.metafields.CAcademy.course_hours.text }}
</div>
</div>

Am I missing something?

[BSS-Commerce · Accepted solution]

Hi @atacox2 ,

Make sure that you have written the metafield correctly.

You can watch the video to see how:

DEV Thuyen NA Store · Products · 5 Pocket Jean · Shopify - 11 July 2023 (loom.com)

[valholden02]

This was a huge help! Thank you! 

[Lisa_Bulpin]

Hello.  What do you do if you don't have a product card liquid in your theme?  I'm trying to do the same thing but not having any luck. 

I have created some product metafields I want added under the product title in the product collection  list. 

[LambdaServices]

Hi there, I know I'm late to this thread but it is still very relevant!

I have used your code to add in my meta field to the product card however it was added it in with [" "] around the text used in the metafield - is there a way to remove this? Also, how would I go about styling this with CSS?

[LambdaServices]

For the nesting special characters, I have found the solution in another thread for anyone looking for it:

{{ card_product.metafields.custom.fragrance | metafield_text }}