How to loop object with inside arrays in shopify liquid

If you want to loop through an object that contains arrays in Shopify Liquid, there are two parts to solve:

Making sure Liquid can actually read the JSON as an object

Looping the object and then each nested array

Converting those Media GIDs into usable image URLs

1. Make Liquid Treat the JSON as an Object

Liquid cannot iterate over raw JSON text directly. The JSON must either come from a JSON metafield or be parsed with parse_json.

{% assign media_map = your_json_variable | parse_json %}

After this, Liquid understands the structure:

media_map.brown_standard → array

media_map.green_standard → array

2. Loop Through the Object and Its Arrays

When you loop an object in Liquid, each item contains:

item[0] → the key

item[1] → the value

In your case:

Key = brown_standard, green_standard

Value = array of Media GIDs

{% for item in media_map %} {% assign color_key = item[0] %} {% assign media_array = item[1] %} <h3>{{ color_key }}</h3> {% for media_gid in media_array %} {{ media_gid }}<br> {% endfor %} {% endfor %}

3. Converting GIDs to Image URLs

Your values look like this:

gid://shopify/MediaImage/28513355694145

These are Media GIDs, not direct CDN URLs. Liquid cannot convert a GID into a CDN URL by itself. You must match the ID to an existing product.media object.

First, extract the numeric ID from the GID:

{% assign gid_id = media_gid | split: '/' | last %}

Then match it against product.media:

{% assign media_map = product.metafields.custom.color_media_map | parse_json %} {% for item in media_map %} {% assign color_key = item[0] %} {% assign media_array = item[1] %} <div class="color-group" data-color="{{ color_key }}"> <h3>{{ color_key | replace: '_', ' ' | capitalize }}</h3> {% for media_gid in media_array %} {% assign gid_id = media_gid | split: '/' | last %} {% for media in product.media %} {% if media.id == gid_id %} <img src="{{ media | image_url: width: 900 }}" alt=""> {% endif %} {% endfor %} {% endfor %} </div> {% endfor %}