Hi Everyone,
I need to upload different banner images based on the different languages on my website: https://www.otivmdesign.com/
Actually I’m using the app “Translate my Store” but they do not support images translation.
To be more detailed I need to change the 4 main banners when I’m switching languages from Italian to English.
Do you have any suggestions or suggested app in order to solve my problem?
Thank you very much for your support,
Andrea Fumagalli
Hello,
Suggestion:
First create an option in theme settings to upload images for different language e.g default is for English and the custom you will add is for another language.
After that with JS get the cookies value when customer switch the language.
Once you get the the value, with JS show and hide the banner images a/to the language selection.
Note: You need to hire someone to implement it who knows liquid and JS
Thanks
Thank you for your reply,
I’m more looking for a translation app that could solve this problem,
do you have any suggestion on it?
Thanks
Try this app: Language Translate ‑ETranslate
It supports change image based on different languages. On my test the feature works well. Of course trust your judgment, because I am from the team. 
I respond this question on Stackoverflow.
on resume you can save the images using files,
Create an objet on the langage json on locales for manage the images on each language.
save the file name, including the extension on the translation key you like.
with that you’re ready to apply:
on any liquid file use translation and file, image filters to charge the corresponding image.
{{ 'images.sliders.1' | t | file_img_url: '375x' }}
you can modify the size of the image or even make them most responsive using srcset.
This is not hard to do but is hard to maintain. I’ll not recomend use this for image than you need change constantly.
Hi @midpush ,
more than 1 month that I’m asking your development team to fix basic bugs you have, I’m really not recommanding your app.
Hi @chefJuanPi ,
Can you show an example for what you did in your code to make it work?
I tried to follow your solution and didn’t work for me.
Thanks
It works but this solution is using liquid, and liquid is server side, means you need to refresh the page to see the change.
To be more clear here a detailed response
open 2 browser screens, one on your admin panel settings/files, the other on themes edit code.
on edit code search the folder locales, the are the translation json files by languajes. On every one of this files create an arborescence, I like Images with soubgroup the section of the page an there the image you need.
Someting like this: (en.default.json)
{
"images": {
"slider_section": {
"first": "here add the image",
"second": "here add other image",
},
"footer": {
"other_image": "here other image"
}
}
// the rest of the translations file
}
add this on every languaje you need, but dont translate the keys, just the content.
The name of the files is up to you but I recommend you add the language on the filename.
At the end the locales files should looks like this:
en.default.json
{
"images": {
"slider_section": {
"first": "slider1_en.jpg",
"second": "slider2_en.jpg",
},
"footer": {
"other_image": "otherImage_en.json"
}
}
// the rest of the translations file
}
fr.json
{
"images": {
"slider_section": {
"first": "slider1_fr.jpg",
"second": "slider2_fr.jpg",
},
"footer": {
"other_image": "otherImage_fr.json"
}
}
// the rest of the translations file
}
set the size you prefers, more CSS, class and any you need this is a regular html image. Do the same for each image, just change the key and it’s done!
When you change the language and refresh the page your page will show a different image.
Hi @chefJuanPi
I’m using the Dawn 2.0 theme, I have an “image with text” section on my home page that I want to fit different images to each language. As you said I have 2 pictures in myadmin panel settings/files.
I tried following your step 1:
{
"images": {
""image-with-text"": {
"first": "https://cdn.shopify.com/s/files/1/0561/8473/3749/files/Box_Dutch_the_why_-_no_background.png?v=1646142370",
"second": "https://cdn.shopify.com/s/files/1/0561/8473/3749/files/HOMEPAGE_-_top_page.png?v=1646142411",
}
}
}
But I see it’s not working, what I need to change?
2 errors.
Ex:
“first”: “myImage.jpg”
instead of
“first”: “//cdn.shopify.com/…/…/myImage.jpg”
Explaining a little the liquid part on my previous message.
{{ “json key” | t | file_img_url: “size” }}
”json key”: is the object on the json files, you have there another error, please replace - with _ . Your json key will be “images.image_with_text.first “
t : this is the modifier translate. It do two things, find with language should be on screen and replace the “json key” for their value.
Ex: t detects your user is navigating on French well it take the value of “images.image_with_text.first” from fr.json
Hi @chefJuanPi
Thank you for the clarification, but I think it will work in specific cases, for example liquid custom sections, not “image with text” on home page.
Hey,
I saw your suggestions and they are very good. I have a question. Can I do something like this for each of my product images? I want to change the pictures on my products when someone changes the language. I’m using German as a basic language But I have traffic from other countries as well so for that I want to add different images for different languages.
On the product details page, I’ll recommend you use meta field file/image, and CSS to hide/show the proper image depending on the language selected for your customer.
it’s not hard to do and easy to update images, your team will have a place on the admin product page to update the images when necessary.
On your shopify admin panel go to Settings / metafields / product and click on “add definition” :
create the namespace images and create a key preferably language code + index ex: (EN_1 or ES_1 or FR_2).
Add all the meta fields you need, just remember a lot of images hidden can slow your site.
On the product gallery section of your template, you can duplicate the images. use the meta field on the duplicated image and assign the class used for your app to hide/show the images.
The details about changing the image will depend on how your language app works. I recommend you react to the app dev team for ultimate details.
This seems like a great thing, but if I want to do it for sections of the product page such as “image with text” is it possible? can you help me?
