Add meta field to product card in Dawn

Store Design
, , , ,

Topic summary

A user seeks guidance on displaying a custom metafield below the product title on product cards in the Dawn theme but cannot locate the relevant liquid file.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Themes > Edit Code
  • Locate the product card file in Snippets or Sections (typically product-card.liquid or product-grid-item.liquid)
  • Insert the metafield code directly below {{ product.title }}:
    {{ product.metafields.custom.YOUR_METAFIELD_KEY }}
  • Optional: Add CSS styling to base.css or theme.css for formatting

Key considerations:

  • Variable names must match your specific metafield configuration
  • One user encountered unwanted brackets [" "] around the metafield output

Resolution:

  • Use the metafield_text filter to remove special characters:
    {{ card_product.metafields.custom.fragrance | metafield_text }}

Screenshots and YouTube tutorial links were shared as visual references. The discussion includes a recommendation to hire a developer if unfamiliar with coding.

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

Hey guys, I need some help adding a metafield I have created into the product card so that it can sit beneath the title.

Does anyone know how to do this? It looks easy but not sure where to do in the code editor and what to drop in and where.

I don’t see a liquid that says card-product

1 Like
2

Hey @BossBee

If you want your metafield to appear below your product title in your product cards then you have to manually code the metafield in product-card.liquid file. This require code changes and some additional coding in your theme files so if you’re not familiar with coding then I would highly suggest you to hire a Shopify developer who can help you out with that. Feel free to connect with me if you want me to help you out and I would be more than happy to give you a helping hand.

Best Regards,

Moeed

3

Hi @BossBee ,

Open Code Editor: Shopify Admin > Online Store > Themes > “Edit Code.”

Find Product Card File: Look in Snippets or Sections (Ella theme likely uses product-card.liquid or product-grid-item.liquid).

Add Metafield Under Title: Find {{ product.title }} and insert:


{{ product.metafields.custom.YOUR_METAFIELD_KEY }}

Style (Optional): Add this to base.css or theme.css:

.product-meta { font-size: 14px; color: #555; }

And wrap metafield in:


{{ product.metafields.custom.extra_info }}

YouTube Video for Reference?

Yes! There are some great videos on Shopify metafields. These will help you understand how to display them:

Shopify Metafields Guide (2024)

How to Display Metafields on Product Page

4

Hi @BossBee

Here’s an example from my store using the Dawn theme.

image_720.png
image_720.png719×332 84 KB

image_720.png
image_720.png720×289 122 KB

When adding a metafield, keep in mind that the variable name will depend on how your metafield is set up. It may not be exactly the same as the one in my screenshot. Make sure to check your own metafield settings to use the correct variable name.

I hope this helps

Best,

Daisy

5

Hi there, I was following these steps and hope you can help me - I managed to populate the product card with the metafield, however it appears with [" "] around the metafield, is there a way to remove/hide the special characters? Thanks!

6

Anyone looking for the answer, I have found it in another thread

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