How do I add a meta field to the product grid in the Crave theme?

Technical Q&A
1

Hi there! I am using the Crave theme in Shopify and I was wondering if anyone could help me understand how to add a meta field to the product grid.

Thanks in advance! Here is the card-product.liquid code pasted below in case you need it for reference:

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {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)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

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

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

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
{% assign firstVariant = card_product.first_available_variant %}
  
    

      

     {%- comment -%} Added by Adam B ( Shopify Theme Support) June 1 2022 {%- endcomment -%}
        {%- if card_product.featured_media or settings.enable_default_image -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              {%- if card_product.featured_media -%}
              
              {% else %}
              
              {% endif %}
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          {% if firstVariant.inventory_quantity >= 1 %} 

QTY IN STOCK: {{firstVariant.inventory_quantity}}

 {% endif %}
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = 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
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}

            {% render 'price', product: card_product, price_class: '' %}
          

        

        {%- if show_quick_add -%}
        {%- comment -%} Added  variant count by Adam B ( Shopify Theme Support) May 27 2022 {%- endcomment -%}
        {% assign variantCount = 0 %}
        {% for variant in card_product.variants %}
          {% assign variantCount = variantCount | plus: 1 %}
        {% endfor %}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.has_only_default_variant or variantCount < 2 -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- if card_product.available == false -%}
            {{ 'products.product.sold_out' | t }}
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            {{ 'products.product.on_sale' | t }}
          {%- endif -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}
          

        

      

    

  

{%- endif -%}
2

@jacksonroy03

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

also share issue images!

3

Hi @jacksonroy03 ,

Please go to Settings > Metafields > Products. First, you need to copy the name of the metafield. For example:

Screenshot.png
Screenshot.png1012×332 15.3 KB

Then go to the file card-product.liquid and add the following code, it will display fine:

{{ card_product.metafields.my_fields.bundle_contents }}

note, change ‘product.’ => ‘card_product.’

You can also refer to the article for more information: https://shopify.dev/api/liquid/objects/metafield#access-metafields

Hope it helps!

4

Hi LitExtension, it seems you have solved this problem for me in two places! Here is the code that worked for what I was trying to do:

{% if card_product.metafields.ProductInfo.Rating != nil %} 

Rating: {{card_product.metafields.ProductInfo.Rating }}

 {% endif %}
5

Hi, I have the same need. Where did you exactly aded this code?

6

Hi @MaBa ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

7

I created a new post and this is the link:

https://community.shopify.com/post/1783804