I’ve created a metafield called Badges for image file types, that accepts multiple images.
Over in the Theme in a custom liquid block, I added this code:
This works when there’s a single file, but not for multiple. What am I missing?
2 Likes
can you please share you meta filed code so i will check and update
Hello @KetanKumar the code I’m using is:
{{ product.metafields.product.badges | img_tag }}
I’ve also tried wrapping it in an tag:
When I try this with a metafield whose definition is a single file/image, it works. My guess is that this code cannot parse comma separated file URLs so I need a different type of code to render these images separately.
Hi @iPedro ,
The payload returned for a file/image list metafield is an array of generic file object .
In my opinion, the best way to achieve your goal is to loop through that array and display each image by combining the Liquid code, an image_url filter and a proper HTML tag.
Try this:
{% assign array_of_badges = product.metafields.product.badges.value %}
{% if array_of_badges %}
{% for product_badge in array_of_badges %}
{% endfor %}
{% endif %}
1 Like
I think you’re on to something.
Unfortunately, each time it returns Shopify’s standard broken image gif:
Thank you for taking the time to help figure this out.
I see that you’re assigning a name (array_of_badges) to the output of the metafield. But were is product_badge coming from? Is that liquid for a standard Shopify badge? Is there a misunderstanding of what I’m trying to do? I’m calling it a badge, but they’re just images that are custom icons for sustainability proof points that I’d like to add to a product page ie. vegan, cruelty free, recycled, etc.
Turns out, something might be happening with that particular metafield @MetafieldsGuru
I tried it with a different metafield and it worked! It’s a little messy as images are too large and go past the page, but I think I can figure out the sizes and will try to contain them into a DIV.
Any idea why the metafield would be broken? When giving it a name, I made it product.badges. I wonder if the product is what’s breaking it because there’s already that name higher up in the domain.
Yep, the code from my previous reply must work with no problems. I’m not bragging. I simply tested it on my dev store prior to sharing here 
.
As for the potentially duplicated piece of code, I don’t think that it’s the root of the problem. The namespace and or key of metafield doesn’t overlap with Liquid variables.
We need to figure out what else makes the other metafield different compared to the “product.badges” one. The namespace and key, obviously, will be different, but it shouldn’t cause any trouble. For some reason, Shopify thinks that there’s no image. I believe that the problem comes from the metafield value. Have you checked if the metafield value format is the same in both cases?
Indeed it does work. Thanks for helping @MetafieldsGuru You live up to your name 
In terms of the values being different, they’re images being uploaded as a File in the appropriate metafield on the product page so I don’t think I can control the values, other than choosing certain file types (they’re all PNG files). Unsure what, but there seems to be something wrong with that particular metafield and is limited to it since it works on others, so I think I’ll just delete it and create a new one for badges.
If I could follow up on my original question, would you take the same approach with a Reference Metafield where multiple Products are selected, and I’d like to output that list on the product page?
Use case: adding a few thumbnails in a product page showing related products that are clickable to those products.
I’ve managed to do this when there’s just one product but it breaks when there are multiples, like in the issue you solved with multiple Files.
Your original solution has given me hints on how to try to go about this but I’m still a beginner at Liquid and Metafields. I’m certain you’ll have the answer at the tip of your fingers.
Thanks again @MetafieldsGuru
1 Like
I’m glad to hear (or rather see) that we managed to figure it out together. Good job!
And you’re right - I do have a solution for a product list as well. The payload returned by Liquid for a product list metafield is an array of product objects. Which means that you can iterate through this array just like you did with the files. Please refer to this awesome tutorial for details.
1 Like
First of all, thank you for posting this guide!
My only problem is, when I delete the image from the custom meta field in edit a product.. the json doesnt get cleared. The image won’t delete. Any idea how I can fix this ?
{% assign array_of_badges = product.metafields.custom.award.value %}
{% if array_of_badges %}
{% for custom_award in array_of_badges %}
![]()
{{ array_of_badges | json }}
{% endfor %}
{% endif %}
Also just this simple
{{ product.metafields.custom.text}}
when I delete the text string from the backend - it stays on the front. Maybe I need to wait longer.. or cachee?
how did you manage to get them badges to show please
Hi how do i get the badges to show up on my product page please
@iPedro I think your question is really helps others. Please post the complete steps.
type of metafiled.
how you rendering
I created an images metafield for products {{ product.metafields.custom.awards }} and added awards badges to some of our products.
Then I added a for loop that repeats the code until it’s gone through all the images. I added this code to a Custom Liquid block:
{% assign array_of_badges = product.metafields.custom.awards.value %}
{% if array_of_badges %}
{% for product_badge in array_of_badges %}
{% endfor %}
{% endif %}
Replace product.metafields.custom.awards with the name of your metafield. Leave .value in there as it’s necessary for the rest of the code to work.
1 Like
Hi!!
I am now facing the same issue, and I’ve tried following thoroughly all your steps, but it seems I am not doing it right 
My idea is to have a metafield that it’s a file, list of files, so each product can have another gallery below the page.
This is my code now:
{{ product.metafields.custom.gallery }}
{% assign array_of_badges =
product.metafields.custom.gallery %}
{% if array_of_badges %}
{% for product_badge in array_of_badges %}
{% endfor %}
{% endif %}
Thank you so much for your help, if I get this working my client will be so happy!!
There’s a simple syntax error here: image_url should be img_url
Regardless, thanks for the code above which helped me