Showing Custom Metafields On Collection / Product Card (Dawn Theme)

[JamesPyle]

I have posted about this before and could never solve the issue. I have a bunch of customer metafields for products and want to show them in other places sometimes.

In this case on the Collection page (product-card.liquid) so I find where I want it and type "Test" and save to make sure I am editing the right file. I am.

Then I put in the metafield liquid:

{{ product.metafields.pro_custom_attributes.category }}

Nothing shows up.

I try

{{ product.metafields.pro_custom_attributes.category.value }}

I make sure my products have a value for category (they do)
I make sure my pro_custom_attributes.category is set to read (it is)

What am I missing or doing wrong? Very frustrated.

[Shadab_dev]

Can only check with a collaborator access to your store as you seem to do it pretty much correct.

Best

Shadab

[namphan]

Hi @JamesPyle,

Please change code:

{{ product.metafields.pro_custom_attributes.category }}

=>

{{ card_product.metafields.pro_custom_attributes.category }}

[JamesPyle]

I tried that. I think the issue might be our Dawn is OLD. V2.4 while current version is 15.x

There's not even a card-product in this version - it's called product-card.

[namphan]

Hi @JamesPyle,

Please send me the code of product-card.liquid file, I will check it for you

[JamesPyle]

{% comment %}
    Renders a product card

    Accepts:
    - product_card_product: {Object} Product Liquid object (optional)
    - media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - add_image_padding: {Boolean} Enables padding on the image to space out the grid
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_image_outline: {Boolean} Show card outline. Default: true (optional)
    - show_rating: {Boolean} Show the product rating. Default: false

    Usage:
    {% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

<div class="card-wrapper">
  <div class="card-information">
    <div class="card-information__wrapper">
            {%- if product_card_product.featured_media -%}
      <h3 class="card-information__text h5">	  	          
      	  <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
            {{ product_card_product.title }}                               
          </a>
      </h3>               
                
        {{ product.metafields.pro_custom_attributes.category.value }}       
        {{ product.metafields.pro_custom_attributes.category }}       
              
                              
      {%- endif -%}      
      {%- if show_vendor -%}
        <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
      <div class="caption-with-letter-spacing light"><h4>{{ product_card_product.vendor }}</h4></div>
      {%- endif -%}
          
         {% comment %} TODO: metafield {% endcomment %}
      <span class="caption-large light">{{ block.settings.description | escape }}</span>
      {%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
        {% liquid
          assign rating_decimal = 0 
          assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1 
          if decimal >= 0.3 and decimal <= 0.7
            assign rating_decimal = 0.5
          elsif decimal > 0.7
            assign rating_decimal = 1
          endif 
        %}
        <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product_card_product.metafields.reviews.rating.value, rating_max: product_card_product.metafields.reviews.rating.value.scale_max }}">
          <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product_card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product_card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
        </div>
        <p class="rating-text caption">
          <span aria-hidden="true">{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}</span>
        </p>
        <p class="rating-count caption">
          <span aria-hidden="true">({{ product_card_product.metafields.reviews.rating_count }})</span>
          <span class="visually-hidden">{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
        </p>
      {%- endif -%}
      
      {% comment } {% render 'price', product: product_card_product, price_class: '' %} {% endcomment %}
    </div>
  </div>

  <div class="card card--product{% if product_card_product.featured_media == nil %} card--text-only card--soft{% endif %}{% if product_card_product.featured_media != nil and show_image_outline %} card--outline{% endif %}" tabindex="-1">
    <div class="card__inner">
      {%- if product_card_product.featured_media -%}
        {%- liquid
          assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

          if product_card_product.featured_media.aspect_ratio == nil
            assign featured_media_aspect_ratio = 1
          endif
        -%}

        <div{% if add_image_padding %} class="card__media-full-spacer"{% endif %}>
          <div class="media media--transparent media--{{ media_size }} media--hover-effect"
            {% if media_size == 'adapt' and product_card_product.featured_media %} style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"{% endif %}
          >
            <img
              srcset="{%- if product_card_product.featured_media.width >= 65 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"
              src="{{ product_card_product.featured_media | img_url: '533x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
              alt="{{ product_card_product.featured_media.alt | escape }}"
              loading="lazy"
              class="motion-reduce"
              width="{{ product_card_product.featured_media.width }}"
              height="{{ product_card_product.featured_media.height }}"
            >

            {%- if product_card_product.media[1] != nil and show_secondary_image -%}
              <img
                srcset="{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: '165x' }} 165w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: '360x' }} 360w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: '533x' }} 533w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: '720x' }} 720w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: '940x' }} 940w,{%- endif -%}
                  {%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: '1066x' }} 1066w,{%- endif -%}
                  {{ product_card_product.media[1] | img_url: 'master' }} {{ product_card_product.media[1].width }}w"
                src="{{ product_card_product.media[1] | img_url: '533x' }}"
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                alt="{{ product_card_product.media[1].alt | escape }}"
                loading="lazy"
                class="motion-reduce"
              width="{{ product_card_product.media[1].width }}"
              height="{{ product_card_product.media[1].height }}"
              >
            {%- endif -%}
          </div>
        </div>
      {%- else -%}
        <div class="card__content">
          <h2 class="card__text h3">
            <a href="{{ product_card_product.url | default: '#' }}" class="full-unstyled-link">
              {{ product_card_product.title }} 
            </a>
          </h2>
           
        </div>
      {%- endif -%}

      {% comment %}
      <div class="card__badge">
        {%- if product_card_product.available == false -%}
          <span class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
        {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
          <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
        {%- endif -%}
      </div>
      {% endcomment %}
    </div>
  </div>
</div>

Thanks for looking. You can see where I was testing where these two lines are:
{{ product.metafields.pro_custom_attributes.category.value }}
{{ product.metafields.pro_custom_attributes.category }}

If I type something there like "test" it shows but the metafields do not show. There is a value for them for all products and there is a valid metafield. They show if I add them on the PDP page as custom liquid.

[namphan · Accepted solution]

Hi @JamesPyle,

You can try the following code:

{{ product_card_product.metafields.pro_custom_attributes.category.value }}

[JamesPyle]

You are a genius, that worked! Thank you 🙂

[namphan]

Hi @JamesPyle,

You're welcome and happy to help you 😊