How to add a meta field on collection page

Daniel_Ward_CC
Shopify Partner
28 0 13

Hi Everyone, 

I'm trying to add a meta field below every product card on the collection page (see image), can sobody help me to do this?
The metafield is: {{ product.metafields.my_fields.product_summary.value }} and the theme is Broadcast

Many thnaks in advance! 
Dan 

 

Screenshot 2021-10-21 at 08.48.52.png

Replies 9 (9)

KetanKumar
Shopify Partner
36839 3635 11972

@Daniel_Ward_CC 

yes add this code your product, card, product gird or product list snippets code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel_Ward_CC
Shopify Partner
28 0 13

Hi @KetanKumar I cant see the code? Also, where should I position it, at the bottom of the code? 

 

UPDATE: I tried adding this code: {{ product.metafields.my_fields.product_summary.value }} to the following pages - but nothign worked. 

Screenshot 2021-10-21 at 11.30.23.png

KetanKumar
Shopify Partner
36839 3635 11972

@Daniel_Ward_CC 

yes product-grid-item

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel_Ward_CC
Shopify Partner
28 0 13

OK Great, and where in the product-grid-Item should I put it - I have tried everywhere!

 

{% comment %}
    Renders list of products in grid layout

    Accepts:
    - product: {Object} product (required)
    - grid_strings: {String} contains a string of grid classes
    - animation_delay: {Int} animation timing for load
    - last_element: {Boolean} True when custom image is taking up the first slot for the collection
                              and the loop is on the last element for the page.
    - index: element index in the loop

    Usage:
    {% render 'product-grid-item', product: product, grid_strings: grid_strings, index: index %}
{% endcomment %}

{%- assign additional_attributes = additional_attributes | default: '' -%}
{%- assign showReviews = showReviews | default: false -%}

{%- unless grid_strings -%}
  {% assign grid_strings = "one-whole" %}
{%- endunless -%}

{%- assign border_class = '' -%}
{%- if settings.product_grid_outline == false -%}
  {%- assign border_class = 'product-item--borderless' -%}
{%- endif -%}

{%- assign alignment_class = '' -%}
{%- if settings.product_grid_center == true -%}
  {%- assign alignment_class = 'product-item--centered' -%}
{%- endif -%}

{%- if settings.quickview_enable == false and settings.color_swatches -%}
  {%- assign has_colors = false -%}

  {%- capture swatches -%}
    {%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%}

    {%- assign swatch_labels = swatch_translation | append: ',' | split: ',' -%}
    {%- for label in swatch_labels -%}
      {%- assign sanitized_label = label | lstrip | rstrip -%}
      {%- if product.options_by_name[sanitized_label].values.size > 0 -%}
        {%- assign has_colors = true -%}

        <form class="radio__fieldset radio__fieldset--swatches radio__fieldset--small" data-grid-swatch-form>
          <div class="selector-wrapper__scrollbar" data-scrollbar data-grid-swatches data-swatch-handle="{{ product.handle }}" data-swatch-label="{{ label }}"></div>

          <button type="button" class="radio__fieldset-arrow radio__fieldset-arrow--prev is-hidden is-not-relative" data-scrollbar-arrow-prev>
            <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
          </button>

          <button type="button" class="radio__fieldset-arrow radio__fieldset-arrow--next is-hidden is-not-relative" data-scrollbar-arrow-next>
            <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
          </button>
        </form>

        {%- break -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endcapture -%}
{%- endif -%}

{%- assign double_img = false -%}
{%- if product.media[1].preview_image and settings.image_hover_enable -%}
  {%- assign double_img = true -%}
{%- endif -%}
{%- assign current_variant = product.first_available_variant -%}

{%- assign product_url = product.url | within: collection -%}

{%- capture item_unique -%}product-item--{{ section.id }}-{{ index }}{%- endcapture -%}
{%- assign animation_anchor = item_unique | prepend: '.' -%}

<div class="product-item {{ grid_strings }} {{ border_class }} {{ alignment_class }} {{ item_unique }}" data-product-grid-item {{ additional_attributes }}>
  {%- capture over_image_content -%}
    {%- assign product_tags = product.tags | join: ',' | append: ',' -%}
    {%- assign preorder = false -%}
    {%- assign on_sale = false -%}
    {%- assign sold_out = false -%}
    {%- assign badge = '' -%}
  
    {%- if product_tags contains '_badge_' -%}
      {%- assign badge = product_tags | split: '_badge_' -%}
      {%- assign badge = badge[1] | split: ',' | first | replace: '_', ' ' -%}
    {%- endif -%}

    {%- if product_tags contains '_preorder' -%}
      {%- assign preorder = true -%}
    {%- endif -%}

    {%- if product.compare_at_price > product.price and settings.sale_tags_enable -%}
      {%- assign on_sale = true -%}
    {%- endif -%}

    {%- unless product.available -%}
      {%- assign sold_out = true -%}
    {%- endunless -%}

    {%- if badge != '' -%}
      <span class="badge-box">{{ badge }}</span>
    {%- elsif preorder and sold_out == false -%}
      <span class="preorder-box">{{ 'products.product.pre_order' | t }}</span>
    {%- elsif on_sale and sold_out == false -%}
      <span class="sale-box">{{ 'products.product.on_sale' | t }}</span>
    {%- endif -%}
    
    {%- if settings.quickview_enable and current_variant -%}
      <button type="button" class="quick-add-button" tabindex="-1" data-button-quick-add-mobile{% if product.has_only_default_variant %} data-quick-add-button{% endif %}>
        <span class="visually-hidden">{{ 'products.general.quick_view' | t }}</span>

        <svg height="18" width="18" class="svg-loader">
          <circle r="7" cx="9" cy="9" />
          <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
        </svg>
      </button>

      <div class="slideup is-not-relative" data-quick-add-holder>
        <button type="button" class="caps is-disable" data-focus-element data-quick-add-label="{{ product.handle }}" data-collection-handle="{{ collection.handle | default: 'primary' }}" {% if product.has_only_default_variant %} data-quick-add-button{% endif %} tabindex="0">
          <span>{{ 'products.general.quick_view' | t }}</span>

          <span>{{ 'products.general.quick_view_added' | t }}</span>

          <svg height="18" width="18" class="svg-loader">
            <circle r="7" cx="9" cy="9" />
            <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
          </svg>

          <span class="caps__error" data-message-error>&nbsp;</span>
        </button>

        <div data-quick-add-form-holder>&nbsp;</div>
      </div>
    {%- endif -%}
  {%- endcapture -%}

  <div class="product-item__image{% if double_img %} double__image{% endif %}" data-product-image>
    <a class="product-link is-not-relative" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
      {% if product.media.size > 0 %}
        <div class="product-item__bg lazyload"
          data-grid-slide
          data-aos="img-in"
          data-aos-delay="{{ animation_delay | times: 150 }}"
          data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
          data-aos-anchor="{{ animation_anchor }}"
          data-aos-easing="ease-out-quart"
          data-bgset="{% render 'bgset', image: product.featured_media.preview_image %}">&nbsp;</div>
        {% if double_img %}
          <div class="product-item__bg__under lazyload" data-bgset="{% render 'bgset', image: product.media[1].preview_image %}">&nbsp;</div>
        {% endif %}
      {% else %}
        {%- comment -%} Show "No image" if product has no media {%- endcomment -%}
        {%- assign image_url_pattern = product.featured_image | img_url: '540x' | replace: '_540x.', '_{width}x.' -%}
        {%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" -%}

        <div class="product-item__bg product-item__bg--empty"
          data-grid-slide
          data-aos="img-in"
          data-aos-delay="{{ animation_delay | times: 150 }}"
          data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
          data-aos-anchor="{{ animation_anchor }}"
          data-aos-easing="ease-out-quart">
            <img
              class="lazyload"
              src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
              data-src="{{ image_url_pattern }}"
              data-widths= "{{ image_widths }}"
              data-aspectratio="1"
              data-sizes="auto"
              width="540"
              height="540"
              alt="{{ product.title | strip_html | escape }}">
        </div>
      {% endif %}
    </a>

    {{ over_image_content }}
  </div>

  <noscript>
    <a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
      <div class="product-item__image no-js-image" style="background-image:url('{{ product.featured_media.preview_image | img_url: '540x' }}'); background-size: contain; background-position: center center; background-repeat: no-repeat;"></div>
    </a>
  </noscript>

  <div class="product-information"
    data-aos="fade"
    data-aos-delay="{{ animation_delay | times: 150 }}"
    data-aos-duration="{{ animation_delay | times: 50 | plus: 800 }}"
    data-aos-anchor="{{ animation_anchor }}"
    data-product-information>
    <a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
      {%- if showReviews and settings.enable_product_reviews -%}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {%- endif -%}

      <p class="product__grid__title">
        {{ product.title | strip_html | escape }}
      </p>
      <span class="price{% if product.compare_at_price > product.price %} sale{% endif %}">
        {% if product.available %}
          <span class="new-price">
            {% if product.price_varies %}
              <small>{{ 'products.general.from' | t }}</small>
            {% endif %}
            {{ product.price_min | money }}
          </span>
          {% if product.compare_at_price > product.price %}
            <span class="old-price">{{ product.compare_at_price | money }}</span>
          {% endif %}
        {% else %}
          <span class="sold-out">{{ 'products.product.sold_out' | t }}</span>
        {% endif %}
      </span>
      {% if current_variant.unit_price %}
        {% capture unit_price_separator %}
          <span aria-hidden="true">/</span>
          <span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {% endcapture %}
        {% capture unit_price_base_unit %}
          {% if current_variant.unit_price_measurement.reference_value != 1 %}
            {{ current_variant.unit_price_measurement.reference_value }}
          {% endif %}
          {{ current_variant.unit_price_measurement.reference_unit }}
        {% endcapture %}
        <br>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
        <span class="unit small">{{ current_variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
      {% endif %}

      {% if settings.quickview_enable == false and settings.color_swatches %}
        {% if has_colors %}
          <span class="grid__product-swatches-count" data-swatch-count>&nbsp;</span>
        {% endif %}
        {{ swatches }}
      {% endif %}
    </a>
  </div>
</div>

 

KetanKumar
Shopify Partner
36839 3635 11972

@Daniel_Ward_CC 

try this code 

also please add any meta code any one product and check

{% comment %}
    Renders list of products in grid layout

    Accepts:
    - product: {Object} product (required)
    - grid_strings: {String} contains a string of grid classes
    - animation_delay: {Int} animation timing for load
    - last_element: {Boolean} True when custom image is taking up the first slot for the collection
                              and the loop is on the last element for the page.
    - index: element index in the loop

    Usage:
    {% render 'product-grid-item', product: product, grid_strings: grid_strings, index: index %}
{% endcomment %}

{%- assign additional_attributes = additional_attributes | default: '' -%}
{%- assign showReviews = showReviews | default: false -%}

{%- unless grid_strings -%}
  {% assign grid_strings = "one-whole" %}
{%- endunless -%}

{%- assign border_class = '' -%}
{%- if settings.product_grid_outline == false -%}
  {%- assign border_class = 'product-item--borderless' -%}
{%- endif -%}

{%- assign alignment_class = '' -%}
{%- if settings.product_grid_center == true -%}
  {%- assign alignment_class = 'product-item--centered' -%}
{%- endif -%}

{%- if settings.quickview_enable == false and settings.color_swatches -%}
  {%- assign has_colors = false -%}

  {%- capture swatches -%}
    {%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%}

    {%- assign swatch_labels = swatch_translation | append: ',' | split: ',' -%}
    {%- for label in swatch_labels -%}
      {%- assign sanitized_label = label | lstrip | rstrip -%}
      {%- if product.options_by_name[sanitized_label].values.size > 0 -%}
        {%- assign has_colors = true -%}

        <form class="radio__fieldset radio__fieldset--swatches radio__fieldset--small" data-grid-swatch-form>
          <div class="selector-wrapper__scrollbar" data-scrollbar data-grid-swatches data-swatch-handle="{{ product.handle }}" data-swatch-label="{{ label }}"></div>

          <button type="button" class="radio__fieldset-arrow radio__fieldset-arrow--prev is-hidden is-not-relative" data-scrollbar-arrow-prev>
            <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
          </button>

          <button type="button" class="radio__fieldset-arrow radio__fieldset-arrow--next is-hidden is-not-relative" data-scrollbar-arrow-next>
            <span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
          </button>
        </form>

        {%- break -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endcapture -%}
{%- endif -%}

{%- assign double_img = false -%}
{%- if product.media[1].preview_image and settings.image_hover_enable -%}
  {%- assign double_img = true -%}
{%- endif -%}
{%- assign current_variant = product.first_available_variant -%}

{%- assign product_url = product.url | within: collection -%}

{%- capture item_unique -%}product-item--{{ section.id }}-{{ index }}{%- endcapture -%}
{%- assign animation_anchor = item_unique | prepend: '.' -%}

<div class="product-item {{ grid_strings }} {{ border_class }} {{ alignment_class }} {{ item_unique }}" data-product-grid-item {{ additional_attributes }}>
  {%- capture over_image_content -%}
    {%- assign product_tags = product.tags | join: ',' | append: ',' -%}
    {%- assign preorder = false -%}
    {%- assign on_sale = false -%}
    {%- assign sold_out = false -%}
    {%- assign badge = '' -%}
  
    {%- if product_tags contains '_badge_' -%}
      {%- assign badge = product_tags | split: '_badge_' -%}
      {%- assign badge = badge[1] | split: ',' | first | replace: '_', ' ' -%}
    {%- endif -%}

    {%- if product_tags contains '_preorder' -%}
      {%- assign preorder = true -%}
    {%- endif -%}

    {%- if product.compare_at_price > product.price and settings.sale_tags_enable -%}
      {%- assign on_sale = true -%}
    {%- endif -%}

    {%- unless product.available -%}
      {%- assign sold_out = true -%}
    {%- endunless -%}

    {%- if badge != '' -%}
      <span class="badge-box">{{ badge }}</span>
    {%- elsif preorder and sold_out == false -%}
      <span class="preorder-box">{{ 'products.product.pre_order' | t }}</span>
    {%- elsif on_sale and sold_out == false -%}
      <span class="sale-box">{{ 'products.product.on_sale' | t }}</span>
    {%- endif -%}
    
    {%- if settings.quickview_enable and current_variant -%}
      <button type="button" class="quick-add-button" tabindex="-1" data-button-quick-add-mobile{% if product.has_only_default_variant %} data-quick-add-button{% endif %}>
        <span class="visually-hidden">{{ 'products.general.quick_view' | t }}</span>

        <svg height="18" width="18" class="svg-loader">
          <circle r="7" cx="9" cy="9" />
          <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
        </svg>
      </button>

      <div class="slideup is-not-relative" data-quick-add-holder>
        <button type="button" class="caps is-disable" data-focus-element data-quick-add-label="{{ product.handle }}" data-collection-handle="{{ collection.handle | default: 'primary' }}" {% if product.has_only_default_variant %} data-quick-add-button{% endif %} tabindex="0">
          <span>{{ 'products.general.quick_view' | t }}</span>

          <span>{{ 'products.general.quick_view_added' | t }}</span>

          <svg height="18" width="18" class="svg-loader">
            <circle r="7" cx="9" cy="9" />
            <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
          </svg>

          <span class="caps__error" data-message-error>&nbsp;</span>
        </button>

        <div data-quick-add-form-holder>&nbsp;</div>
      </div>
    {%- endif -%}
  {%- endcapture -%}

  <div class="product-item__image{% if double_img %} double__image{% endif %}" data-product-image>
    <a class="product-link is-not-relative" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
      {% if product.media.size > 0 %}
        <div class="product-item__bg lazyload"
          data-grid-slide
          data-aos="img-in"
          data-aos-delay="{{ animation_delay | times: 150 }}"
          data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
          data-aos-anchor="{{ animation_anchor }}"
          data-aos-easing="ease-out-quart"
          data-bgset="{% render 'bgset', image: product.featured_media.preview_image %}">&nbsp;</div>
        {% if double_img %}
          <div class="product-item__bg__under lazyload" data-bgset="{% render 'bgset', image: product.media[1].preview_image %}">&nbsp;</div>
        {% endif %}
      {% else %}
        {%- comment -%} Show "No image" if product has no media {%- endcomment -%}
        {%- assign image_url_pattern = product.featured_image | img_url: '540x' | replace: '_540x.', '_{width}x.' -%}
        {%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" -%}

        <div class="product-item__bg product-item__bg--empty"
          data-grid-slide
          data-aos="img-in"
          data-aos-delay="{{ animation_delay | times: 150 }}"
          data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
          data-aos-anchor="{{ animation_anchor }}"
          data-aos-easing="ease-out-quart">
            <img
              class="lazyload"
              src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
              data-src="{{ image_url_pattern }}"
              data-widths= "{{ image_widths }}"
              data-aspectratio="1"
              data-sizes="auto"
              width="540"
              height="540"
              alt="{{ product.title | strip_html | escape }}">
        </div>
      {% endif %}
    </a>

    {{ over_image_content }}
  </div>

  <noscript>
    <a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
      <div class="product-item__image no-js-image" style="background-image:url('{{ product.featured_media.preview_image | img_url: '540x' }}'); background-size: contain; background-position: center center; background-repeat: no-repeat;"></div>
    </a>
  </noscript>

  <div class="product-information"
    data-aos="fade"
    data-aos-delay="{{ animation_delay | times: 150 }}"
    data-aos-duration="{{ animation_delay | times: 50 | plus: 800 }}"
    data-aos-anchor="{{ animation_anchor }}"
    data-product-information>
    <a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
      {%- if showReviews and settings.enable_product_reviews -%}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {%- endif -%}

      <p class="product__grid__title">
        {{ product.title | strip_html | escape }}
      </p>
      <span class="price{% if product.compare_at_price > product.price %} sale{% endif %}">
        {% if product.available %}
          <span class="new-price">
            {% if product.price_varies %}
              <small>{{ 'products.general.from' | t }}</small>
            {% endif %}
            {{ product.price_min | money }}
          </span>
          {% if product.compare_at_price > product.price %}
            <span class="old-price">{{ product.compare_at_price | money }}</span>
          {% endif %}
        {% else %}
          <span class="sold-out">{{ 'products.product.sold_out' | t }}</span>
        {% endif %}
      </span>
      {% if current_variant.unit_price %}
        {% capture unit_price_separator %}
          <span aria-hidden="true">/</span>
          <span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {% endcapture %}
        {% capture unit_price_base_unit %}
          {% if current_variant.unit_price_measurement.reference_value != 1 %}
            {{ current_variant.unit_price_measurement.reference_value }}
          {% endif %}
          {{ current_variant.unit_price_measurement.reference_unit }}
        {% endcapture %}
        <br>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
        <span class="unit small">{{ current_variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
      {% endif %}

      {% if settings.quickview_enable == false and settings.color_swatches %}
        {% if has_colors %}
          <span class="grid__product-swatches-count" data-swatch-count>&nbsp;</span>
        {% endif %}
        {{ swatches }}
      {% endif %}
    </a>
{{ product.metafields.my_fields.product_summary.value }}
  </div>
</div>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Daniel_Ward_CC
Shopify Partner
28 0 13

Unfortunately no, that didn't work We are using an app that gives advanced filtering options - do you think that could be having an impact? @KetanKumar 

shakalakastudio
Visitor
1 0 0

Hi Daniel!

 

Did you manage to do this? I'm trying to do the same on Dawn theme. Any info would be a great help!

 

Thank you!

Wysong
New Member
7 0 0

Any updates? It really seems like this should be possible.

Wysong
New Member
7 0 0

I got it!

The snippet you want is [card.product.liquid] and you need change "product" in {{product.metafields.my_fields to "card_product" {{card_product.metafields.my_fields 

 

For example I'm putting a free shipping badge under the product image. Find the second (class="card__content") div and enter the code there. I have a true/false metafield for a "free shipping badge"

 

<div class="card__content">
{% if card_product.metafields.my_fields.free_shipping_badge == true %}
<img src="../free-shipping.png" alt="free shipping" border="0" style="height:17px;">
{% endif %}

 

Hope this helps.