Help with Webflow Localization – Swap image with embedded text based on language

Design help Localization
1

Hi everyone,

I’m currently building a bilingual website (German/English) and using Webflow’s new Localization feature. So far, everything is working well in terms of layout and language switching. Here’s a read-only link to the site if you’d like to take a look.

However, I’ve run into a specific issue I need help with:

On the homepage, there is a section that includes a graphic where text is directly embedded into the image itself – not added as editable text in Webflow, but part of the actual image (like a JPG or PNG).

Right now, the graphic is in German.
What I would like to achieve is: when a user switches to English, the image should be swapped out with an English version of the same graphic.

My question is:
What’s the best way to do this using Webflow Localization?
– Is there a built-in way to swap images based on the selected language (maybe via CMS or conditional visibility)?
– Or would this require some custom code?

Any ideas, tips, or best practices from others who’ve dealt with similar scenarios would be hugely appreciated!

Thanks in advance :blush:
Best regards,

2

Hi there,

You can swap out images based on the selected locale in Webflow! Here’s how to replace an asset for a specific locale:

  1. Click the Locale view dropdown in the top bar
  2. Choose your desired locale (English in your case)
  3. Select the image on the canvas
  4. Go to Element settings > Image settings
  5. Click Replace image
  6. Choose an asset or upload a new asset in the Assets panel

This is a built-in feature of Webflow’s localization system and doesn’t require any custom code.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I believe you can simply override the image content itself in the locale, but I haven’t tried that approach yet.

If that doesn’t work you have two easy options;

  1. Create two images, give them different classes and then change the visibility per locale, so that the German image is only visible in the German locale and the English image is only visible in the English locale.
  2. Use a background image, which is a style property. All styles can be overridden at the locale level.
1 Like