[TUTORIAL] Full Multi Language Site - Easy to set-up and to use!

Hi Noah

I have a live site here. I also use it for some CMS on the “Event” Site on the Projects: https://www.extendinghope.org/

Webflow Preview: https://preview.webflow.com/preview/extendinghope?utm_medium=preview_link&utm_source=designer&utm_content=extendinghope&preview=be94ce6f0e5194e19f7ee33b80565b68&pageId=59a975473963790001b8bb81&mode=preview

I didn’t have any problem so far. Except for SEO i need to improve it a little better. I dont know what the options are for that.
Please give me your feedback. :slight_smile:

1 Like

Hello everyone and @angro

Thanks so much for this free workaround. I’ve just implemented it on a small site and it seems to be running smoothly but I have a questions.

  • How can I translate text on buttons, spans, and text within contact forms?

  • @vincent is there any update on a native localization solution within Webflow?

https://preview.webflow.com/preview/yara-d48118?utm_medium=preview_link&utm_source=designer&utm_content=yara-d48118&preview=afce4c43f47f0a9d7ac9dd10acd2cb0b&mode=preview

Thanks,
Duncan

Nothing has been said about it for quite some time, I have the feeling it may not have started yet. It’s a hard task and it’s maybe the most transversal feature being planned at the moment, because it covers not only the front end but also the Editors back end and more. Also AFAIK no one has ever achieved it very well. Localisation systems I used always have been cumbersome, time consuming, bug inducing, maintenance hell or very incomplete. Webflow isn’t joking with workflows, user experience, Uis and stuff, so it will take time.

1 Like

I have noticed that this tweak doesn’t work on all browsers. For example Chrome on Windows is showing more then one language. It can’t read the ‘var DEAFULT_LANG’ for some reason.

@vincent thanks for the update! Weglot seems be the best solution for Webflow localization… in your opinion is this accurate? Why or why not?

yikes - can you show a screenshot of what happens in the Chrome on Windows? Thanks.

I dont have an example screen right now.
Chome (osx), Egde, Firefox, Opera are all fine.

Good afternoon! Could you please answer my question? I am a junior web developer and I am going to create a website in Chinese. I would like to know how it is possible. I mean, do I need to have any Chinese language skills or any special software for that? I am learning Chinese for work now at Preply. I can speak a little but not sure about writing.

I don’t see how to add ?lang=en on the end of the url. Can someone help me with this?

How did you get your website to translate to different languages?

Hi Gustav,

thanks for this elegant solution. I’ve added it to my site and it worked nicely. The problem arose when i tried to add Finsweet filtering. It works fine by itself but when i add your code it stops working. Unfortunately there are no errors in the console whatsoever so i don’t know where even to start troubleshooting. Any help or advice would be greatly appreciated.

I’m not familiar with Finsweets filtering, but as far as I can understand from reading their site nothing jumps out as incompatible. Can you share a read-only link or something so that I can have a look?

Hi Gustav,
i poked around a bit and solved the problem by adding a class to the language switch buttons and changed your code
from:
var anchors = document.getElementsByTagName('*');

to this:
var anchors = document.getElementsByClassName('lang-btn');

And that fixed the Finsweet filtering. It’s working nicely now. Thanks a lot for your code.

I also moved functions definitions into the head section under custom code from footer.

Solution is; never use <br> and start using max widthts and margins :relaxed:

Hey!! Thank you so (very) much!! @angro & you all!! This works very well.

I have an issue:
I’m trying to get the ALT text field in CMS multi-image with some custom code.

but ignores (as more or less expected) the [[en]] [[other]] language…
is there a work around?

(the client only have 1 language for the captions and that’s a problem)

Thank you

Does someone know how i need to change the Code if i want to use it without the [[de]] and [[en]] on the Same page but just normally with 2 seperate sites where one is d omain.com/page and the other one is domain.com/en/page - I just want to be able to use this code because it has an cookie that saves the preferance and automatically detects the users Browserlanguage, i just dont want to use it on the same page put in the “traditional” way.

Hi,
I’m developing an ecommerce website and I’m looking to make a multi language experience. I duplicated almost all pages except product page and checkout page.

The tutorial works perfectly except for the cart. As you can see, the text doesn’t change according to the language and stay like that : [[fr]] xxxx [[en]] xxx
Does someone have an idea to solve my issue?

https://preview.webflow.com/preview/ikinesis-test?utm_medium=preview_link&utm_source=designer&utm_content=ikinesis-test&preview=142bb9a901b87c8b6cf91e26da18a063&pageId=6266e55a7a346139817247c6&workflow=preview

Thank you !!

If anyone is still struggling with integrating this with their website, take a look at reply #29 above :point_up_2:
https://discourse.webflow.com/t/tutorial-full-multi-language-site-easy-to-set-up-and-to-use/67398/29
@Dididi has made it super easy to integrate this code, take a look at his repo all you need to do is add the CDN link and change some element classes!

Hi everyone, I apologize if this has been discussed already but, once I select the language does it remain selected if I change page?

I’m having some trouble getting the above code into the . Do I need to have a paid subscription to use this feature?