Rendering multiple images using metaobject/metafield

Store Design
,

Topic summary

Issue: Users are attempting to render multiple images from Shopify metafields/metaobjects but encountering problems with their Liquid code.

Initial Problem: The original poster’s code wasn’t rendering images despite the metafield containing image data (shown as reversed/encoded strings in the output).

Solutions Provided:

  • Use a list metafield of images and iterate directly: {% for award in product.metafields.custom.single_product_awards.value %}
  • Add .value to the metafield path when accessing image data
  • For blog articles, the working syntax is: {% for image in article.metafields.custom.image_gallery.value %}

Key Technical Detail: The critical fix involves appending .value to the metafield reference to properly access the image objects for rendering.

Status: Multiple users confirmed working solutions for both product pages and blog posts using the corrected metafield syntax.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

I have this code and is not rendering anything.

{% assign array_of_awards = product.metafields.custom.single_product_awards.value.award_image %}
  {% if array_of_awards %}
   {% for award in array_of_awards %}
    <img src="{{ award | image_url }}" />
   {% endfor %}
  {% endif %}
{{ array_of_awards }}

However, array_of_awards returns:

["gid://shopify/MediaImage/33224842510590","gid://shopify/MediaImage/33224844345598","gid://shopify/MediaImage/33224881996030","gid://shopify/MediaImage/33224879997182","gid://shopify/MediaImage/33224870396158","gid://shopify/MediaImage/33224876556542","gid://shopify/MediaImage/33224864694526","gid://shopify/MediaImage/33224850702590"]
2

@stressedowner

Hello,

Please try this below code (if you create a list metafield of images then works perfectly)

{% for award in product.metafields.custom.single_product_awards.value %} 
{% if award!= blank %}
<img src="{{ award | image_url }}" /> 
{% endfor %}
{% endfor %}

Thankyou

3

This is not working. The loop is not returning anything.

4 
{% for award in product.metafields.custom.single_product_awards.value %} 
{% if award!= blank %}
<img src="{{ award | image_url }}" /> 
{% endif %}
{% endfor %}
1 Like
5

did you had solution for this? could you share for mw. i tried above way but not work :relieved_face:

6

Don’t know if you’re still looking for a solution, but I messed with @shreyhweb 's code and got mine working. My issue was I was using multiple image files for a gallery and this is how I’ve gotten it to work so far.

{% for [object] in shop.metaobjects.[object].[handle].[field].value %}
{% if [object]!= blank %}

{% endif %}
{% endfor %}

My actual code:

{% for custom_colors in shop.metaobjects.custom_colors.custom-finishes.gallery.value %} 
{% if custom_colors!= blank %}
   
{% endif %}
{% endfor %}
7

How can I get this code and adapt it to my image gallery in my blog post?
I’ve tried this and it doesn’t work.

{% for image_object in article.metafields.custom.article_gallery %}
{% if image_object != blank %}

{% endif %}
{% endfor %}
8

Finally, the code that works for me is as follows:

{% for image in article.metafields.custom.image_gallery.value %}
    {% if image!= blank %}
 

{% endif %}
{% endfor %}
1 Like
9

I was just about to reply with, "you probably just need to add “.value” to your string. Glad you figured it out and thanks for sharing.

1 Like