How to Show different Product images for Different Shopify Markets or Languages [Solved] Without app

Legacy boards (read-only) Education & Credentials
, , , ,
1

This is not a Question of mine but it is the Question of thousands of Shopify Merchants and Developers “How to Show different product images for different language/markets in Shopify with custom coding”.

I search this Query on google search engine but don’t know why google don’t find the website where this solution exist with custom coding. This make me more angry when I search on every Shopify related platform but I didn’t get what I want. I even check Youtube, Shopify community, Quora and each platform where they talk about Shopify. This was easy for me to deny my fiverr client and cancel the order but I ask before doing this to myself “What if I able to do this then it will help thousands of Merchants and Developers”. This hope make me more motivated and I decided to make it possible even it take whole week. There are many tutorials on yoututbe that talk about changing different images for different sections. But wait… They talk about sections but we need for product images.

So finally I came accros a Shopify Community Post where this topic was asked.

I was shocked when the most active person with 37598 Posts on Shopify community**, 3668** Solutions and 12156 likes says.

thescriptflow_0-1743108000490.png
thescriptflow_0-1743108000490.png733×243 14.5 KB

This make more motivated to make it happen with custom coding. So I scroll down and found the app that fulfill my need. So I install the app " EZ Product Image Translate" but I got suck when I found that it charge $20/month just for Show different images for different markets. It maybe translated images.

Disclaimer: This script is work for Shopify Gloow theme. Because I work on client store and there she use Shopify Gloow theme. But don’t worry if you have sense of coding then you can use this Script for each theme of Shopify.

So follow these steps to achieve it with code no app. I wish I post this as a Blog on my website but unfortunately it’s not ready yet. Here are the steps you can follow.

  • Go to Shopify Admin.
  • Click on “Online Store”.
  • Select the theme where you want to add this feature. Now click on three dots and click “Edit code”. (I am using Shopify Gloow theme. If you using other theme then method is 100% same but name of theme file will be change. Feeling stuck just find all detail in the Signature and just reach me out.)
  • Now in the Edit code search for “snippets/product-thumbnail.liquid” file.
  • Now press “ctrl + f” and search for “product__media media media–transparent”. It look like this.
<div class="product__media media">
    {{ media.preview_image | image_url: width: 1946 | image_tag:
      class: image_class,
      loading: 'lazy',
      sizes: sizes,
      widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
    }}
</div>

Replace it with this one updated code.

** {% if request.path contains '/nl' %}**
**{% assign dutch_images = product.metafields.custom.dutch_images.value %}**
**{% for img in dutch_images %}**
**<img src="{{ img | image_url: width: 300, height:400 }}">**
**{% endfor %}**
**{% endif %}**

<strong><div class="product__media media media--transparent d5-media-2">
  {% if request.path contains '/nl' %}
    {% assign dutch_images = product.metafields.custom.dutch_images.value %}
    
    {% if dutch_images.size > 0 %}
      {% assign dutch_image = dutch_images.first %}
      
      {% assign widths = '246,493,600,713,823,990,1100,1206,1346,1426,1646,1946' | split: ',' %}
      
      <img class="{{ image_class }} nl-image" 
           loading="lazy"
           src="{{ dutch_image | image_url: width: 1946 }}"
           srcset="{% for width in widths %}
             {{ dutch_image | image_url: width: width }} {{ width }}w{% unless forloop.last %}, {% endunless %}
           {% endfor %}"
           sizes="{{ sizes }}"
           alt="{{ dutch_image.alt | default: product.title }}"
           width="{{ dutch_image.width }}"
           height="{{ dutch_image.height }}">
    {% else %}
      {{ media.preview_image | image_url: width: 1946 | image_tag:
        class: image_class,
        loading: 'lazy',
        sizes: sizes,
        widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
      }}
    {% endif %}
  {% else %}
    {{ media.preview_image | image_url: width: 1946 | image_tag:
      class: image_class,
      loading: 'lazy',
      sizes: sizes,
      widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
    }}
  {% endif %}
</div></strong>

Now this is the main logic this will detect the langauge change condition.

If you understand this then it mean you can acheive what you want.

{% if request.path contains '/nl' %}

Let me explain this logic. So basically my client domain is https://gloweskincare.store/ domain the all content show in English and on https://gloweskincare.store/nl it show in Dutch. So this is the main point where you have to focus on it. It canbe de and many other language formate.

So now you add the logic not it’s time to create metafield in Shopify for product to upload product images.

Follow these steps.

Go to Shopify Admin > Click on Settings > Custom Data > Product > Add Definition > Name it “Dutch images” and select type “file” with “list of files”.

Now go to each product in the Shopify products and upload the images.

So here is the result you will see.

Default: https://gloweskincare.store/products/glowe-collagen-restore-cream

Nl Language: https://gloweskincare.store/nl/products/glowe-collagen-restore-cream

If you think you are not able to do this just reach me out. All details shared.

Ah I hope I save your hundred of $$$.

1 Like
2

Hi there :waving_hand: ,

If you’d rather avoid the custom‐code route, you can use ready-made apps to handle image variations by language or by market:

Both apps offer free trials so you can see them in action, and will save you the $20/mo and weekly coding effort you described—no Liquid tweaks required!