Add meta field to product card in Dawn

[BossBee]

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

[Moeed]

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

[CodingFifty]

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:

<p>{{ product.metafields.custom.YOUR_METAFIELD_KEY }}</p>

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

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

And wrap metafield in:

<p class="product-meta">{{ product.metafields.custom.extra_info }}</p>

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

[LambdaServices]

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!

[LambdaServices]

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

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

[DaisyVo]

Hi @BossBee 

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

 

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