Product Page for loop with metafields and metaobjects

[ScottPO]

Hi there!

Im looking to implement a custom html code to my product page that is dynamic to the product on the page, that will display text and icons of the coffee flavor and roast profiles. I have meta objects set up for unique flavor profiles and coffee roast profile. I would love some help in getting these set up properly in the code. Ive currently got the section hard coded but when I try to make it dynamic with a for loop and add the key values of the meta object nothing happens for me. Ive attached an example of what im looking to achieve. and also included the current hard code that im working with. any insights would be extremely appreciated.

The meta object details are below:

Roast Level: roast_level

Fields:

ICON: roast_profile.roast_indacator

LABEL: roast_profile.roast_level

Flavor Profile: flavor_profile

Fields:

ICON: flavor_profile.icon

LABEL: flavor_profile.label

Site: roostercrowcoffee.com

PW: rccoffeeco!

    

	
![Medium-Roast.svg?v=1747773410|400x110](upload://2GjON2c0cJBcqBcbCGZHJhhp0t6.svg)

    

    
        ### Medium Roast
			

		
    

    - - ![blueberry.svg?v=1747769237|512x512](upload://s6aNAkHWBCEvP52tMLjG535TWnm.svg)

              ### BLUEBERRY

    

								
      - ![crumble-pie.svg?v=1747769237|512x512](upload://SNLNWsOhHHECVJk8WSFi0cd2Wq.svg)

              ### CRUMBLE PIE

    
    
								
								

						
    

				

		

Thank you so much!!

[tim_1]

Ideally, you should share screenshots of metaobject and metafield definitions.

You can have a lookat https://community.shopify.com/c/technical-q-a/metafields-not-showing-correctly/m-p/3046838/highlight/true#M189121 which is very similar recent question.

[ScottPO]

Hi @tim_1 , Thanks so much!

Here are screenshots of the Metafield and metaobjects for the flavor profile:

I also referenced your shared link and updated my code, but its not working for me. I just updated the flavor profiles first, thinking ill tackle the roast profile next so I left the hardcode in place for medium roast. I tried with {{ preference.label }} and {{ preference[“label”] }}, nothing worked.

    

	
![Medium-Roast.svg?v=1747773410|400x110](upload://2GjON2c0cJBcqBcbCGZHJhhp0t6.svg)

    

    
        ### Medium Roast
			

		

{% if product.metafields.shopify.custom.flavor_profile %}
  
        

  ### Flavor Profile
  
    {% for preference in product.metafields.shopify.custom.flavor_profile.value %}
      - {{ preference.label }}
    {% endfor %}
  

  

        

{% endif %}    
    
    

[ScottPO]

I believe i may have gotten it. but im still getting an error with the syntax. So i cant test it if it will display.

CSS is still the same. just uploading the HTML.

Error: Liquid syntax error (line 91): Expected end_of_string but found id in “{{ Roast_Profile.Roast Indicator | img_url: ‘32x’ }}”

{% if product.metafields.shopify.custom.roast_level %}

    

    {% for Roast_Profile in product.metafields.shopify.custom.roast_level.value %}

	

    
        ### {{ Roast_Profile["Roast Level"] }}
		
	{% endfor %}
	    

	{% endif %}

  

 {% if product.metafields.shopify.custom.flavor_profile %}

    

    {% for Flavor_Profile in product.metafields.shopify.custom.flavor_profile.value %}

	

    
        ### {{ Flavor_Profile["label"] }}
		
	{% endfor %}
	    

	{% endif %}
		

[tim_1]

Morning!

Great job.

Sure, {{ Roast_Profile.Roast Indicator | img_url: ‘32x’ }} will give you an error as you’ve missed the underscore – Roast_Indicator.

Also – to reference metafield you need to use namespace and key, like so: product.metafields.namespace.key. And then you may append .value to get the MF value (if it’s complex MF).

So using product.metafields.shopify.custom.flavor_profile is not right.

So, I’d do this:

{% if product.metafields.custom.flavor_profile %}
    
      {% for profile in product.metafields.custom.flavor_profile.value %}
        

          
          ### {{ profile.label }}
        

      {% endfor %}
  

{% endif %}

Note that .label can be used without .value (it’s a single line text, simple field), but .icon needs it to convert it to image object in order to use img_url filter