How to translate (replace) my collection images?

[Lankaster]

Shopify support advised me to use metafields and add the code

[AndyX]

Hi there,

Shopify’s built‑in localization only translates text; it doesn’t automatically swap images when a customer changes languages. To serve different collection images for each locale you have a couple of options:

• Use alternate‑image metafields: Create a metafield definition on the Collection resource (e.g. custom.landing_image_fr, custom.landing_image_de, etc.) for each language you need. Upload your translated/locale‑specific image to each metafield. In your collection template, check the current locale with request.locale.iso_code and render the appropriate metafield image if it exists; otherwise fall back to the default collection image. For example:

  {%- assign locale = request.locale.iso_code -%}  
  {%- if locale == 'fr' and collection.metafields.custom.landing_image_fr.value != blank -%}  
    <img src="{{ collection.metafields.custom.landing_image_fr | image_url: width: 1200 }}" alt="{{ collection.title }}">  
  {%- elsif locale == 'de' and collection.metafields.custom.landing_image_de.value != blank -%}  
    <img src="{{ collection.metafields.custom.landing_image_de | image_url: width: 1200 }}" alt="{{ collection.title }}">  
  {%- else -%}  
    <img src="{{ collection.image | image_url: width: 1200 }}" alt="{{ collection.title }}">  
  {%- endif -%}  
  

  You can add as many conditions as you have locales.

• Use Translate & Adapt or a translation app: Shopify’s free Translate & Adapt app allows you to translate resource content and upload different images for each locale. When you edit a collection in Translate & Adapt you can choose a different media item for each language. Many third‑party translation apps (e.g. Weglot, Langify, Transcy) also support image translation.

• Duplicate collections per language: As a workaround you can create separate collections for each language with their own images and link them in your navigation based on the user’s locale.

Using one of these approaches will let you display a different collection banner image depending on the selected language.

[Michkyy]

Have you been able to get it done ?

[Laza_Binaery]

Hi @Lankaster

I think there is a way to have a collection of images based on language. This has a few steps, but no code changes are needed. And it should work in most of the themes.

1. It starts with creating a metaobject. I tried first with metafield but for some reason Translate & Adapt app did not pick that. So in Settings > Metafields and metaobjects, add a new metaobject definition. Name it however you want, but make it one field and File>image as type.
   

   

2. Next step is to create a metafield so we can link the image to each collection
   

   

3. Now go to your collection and in Metafields, add a new entry ( new metaobject). It is just an image, but still, it is now connected to the collection.
   

   

4. Next step is to go to Translate and Adapt app > select Metaobjects and on Custom Image, you have the English version of the image and your second language that you will fill
   

   

5. Last step is to connect that metafield in your theme. Depending on what theme you have, there should be an option to add an image or banner on the collection page. For example, in the Horizon theme, there is an option to add a new Image block to the Collection heading section. And in the Image settings, you have to link the collection metafield.
   

   
   
   
   

If you filled all data when you change the language in the top menu, you should see a different image, based on the language you changed in the Translate and Adapt app

Maybe there are better solutions, but this should work fine.

[Lankaster]

Thank you very much! It works fine but not for collection images

[Laza_Binaery]

So it is not working for you

And yes, as a custom image, not for the actual collection image you put in the collection admin page. But as a workaround.

If you want to share your store link and collection page with an image that you have issues with, I may try to assist more.