How can I add metafields to the product grid on the collection page?

Store Design

Topic summary

A user working with the Dawn theme wants to display product metafields (such as package length or content) in the product grid on collection pages.

Solution provided:

  • Create custom metafield definitions in Shopify admin (Settings → Metafields → Product)
  • Navigate to Online Store → Theme → Edit code
  • Locate the card-product.liquid snippet file
  • Add Liquid code to display metafields using the format: {{ card_product.metafields[namespace][key] }} (e.g., {{ card_product.metafields.package.length }})
  • Remember to add metafield data to individual products in the admin panel

Key correction: Initially suggested using product.metafields, but this was corrected to card_product.metafields to properly reference the product object within the card snippet.

The issue was resolved after implementing the corrected code syntax.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

I’m working with dawn and wanted to show more details in form of metadata about my products at the collection page in the product grid, for example length or package content. Is there a way to edit the product grid in order to be able to add metafields?

2

  1. follow these article to add metafield
    https://help.shopify.com/en/manual/metafields/metafield-definitions/creating-custom-metafield-definitions

  2. Go to Online Store->Theme->Edit code

  3. snippets/card-product.liquid

  4. after that change namespace and key with code below
    {{ product.metafields.[namespace].[key] }}
    ex: {{ product.metafields.package.length}}

{{ product.metafields.package.content}}
5. Copy code that you’ve updated above after that paste it to where you would like to show it.

3

thanks for answering!

I followed every step, but it wount show any metafields data

do I have to tag it rightly?

4

Hi,

Could you please go to Settings->Metafields-> Product after that take a screenshot? It will like the screenshot below:

EBOOST_0-1671670257362.png
EBOOST_0-1671670257362.png1307×648 12 KB

The code below will show data of inspired_by metafield. Namespace: custom. Key: inspired_by

{{ card_product.metafields.custom.inspired_by}}

And remember go to admin products → select product to add data to each field.

Hope can help.

EBOOST

5

Hi,

Sorry. It should be replace product to card_product like code below:

{{ card_product.metafields.custom.inspired_by}}

Hope can help.

EBOOST

1 Like
6

hey,

yes that helped thanks!

Jocki