Display Product Metafield Inside Collection | Dawn Theme

[willbeing]

The goal is to display product metafields on the collection pages, yet calling the following lines of code inside card-product.liquid returns null/blank: 

{% if product.metafields.custom.width %}
  <p>{{ product.metafields.custom.width }}</p>
{% endif %}

{{ product.metafields | json }}

This seems to be an issue with scope. How does one enable collections to access product metafields in the Dawn theme?

Below are images of the metafields for namespace info.

[Made4uo-Ribe · Accepted solution]

Hi @willbeing 

You need to use a forloop. See example below

{% for product in collection.products %}
{% if product.metafields.custom.width.value %}
  <p>{{ product.metafields.custom.width.value }}</p>
{% endif %}
{% endfor %}

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe · Accepted solution]

Hi @willbeing 

You need to use a forloop. See example below

{% for product in collection.products %}
{% if product.metafields.custom.width.value %}
  <p>{{ product.metafields.custom.width.value }}</p>
{% endif %}
{% endfor %}

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[willbeing]

Thank you, @Made4uo-Ribe. When used inside card-product.liquid, this lists the width of every product in the collection within each card. What condition should be added to list only the width for that card?

[willbeing · Accepted solution]

No need to respond, @Made4uo-Ribe - looks like comparing product.id to card.product.id works:

{% for product in collection.products %}
  {% if product.metafields.custom.width.value and product.id == card_product.id %}
    <p>{{ product.metafields.custom.width.value }}</p>
  {% endif %}
{% endfor %}