Adding a metafield to product card in collections

Store Design
,

Topic summary

Main Issue:
Users want to display product metafields on collection page product cards, typically above or alongside the price.

Solution Provided:

  • Edit the card-product.liquid theme file
  • Locate the price render code: {% render 'price', product: card_product, price_class: '' %}
  • Add metafield code below it: {{ card_product.metafields.custom.fieldname }}
  • Replace ‘fieldname’ with the actual metafield namespace and key

Common Issues & Fixes:

  • Variable naming: Ensure consistent use of card_product (not product_card_product)
  • Metafield path accuracy: Verify the exact namespace and key match the metafield definition in Shopify admin
  • Unwanted brackets: Use | metafield_text filter to remove [" "] characters around text values
  • Missing file: Some themes may not have card-product.liquid; the file might use a different naming convention depending on the theme

Status:
Multiple users confirmed the solution works. Questions remain about theme-specific file locations and CSS styling for the displayed metafields.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

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.

atacox2_1-1688668907167.png
atacox2_1-1688668907167.png1640×518 48.7 KB

2

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

view (37).png
view (37).png1020×867 47.4 KB

  • Will display on the page as “123”

Result:

![view (38).png|271x494](upload://j3UEi7nkjb7L0ifdvXIP543p6cY.png)

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

3

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

Am I missing something?

4

Hi @atacox2 ,

Make sure that you have written the metafield correctly.

view (45).png
view (45).png1385×857 49.1 KB

You can watch the video to see how:

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

1 Like
5

This was a huge help! Thank you!

6

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.

7

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?

8

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 }}
9

could this file be called something else as unable to locate this in the charge theme - thanks