When it comes to creating a website on Webflow the possibilities and freedom are endless.

And, we’re big lovers of the no-code tool Webflow because of the flexibility it’s brought to many of our users. We’ve even built our own multilingual Webflow website with the help of a web agency – Finsweet – which you’re free to clone.

Apart from being super flexible and user-friendly, Webflow also offer a native localization solution that allows you to translate the content on your site.

So, if you’re ready to turn your Webflow website into a multilingual site, then we’ll show you step-by-step how in this Webflow language switcher tutorial, plus share some custom language switcher templates you can clone right now on your site.

Does Webflow Support Multiple Languages?

In an increasingly global marketplace, having a multilingual website is becoming a necessity. A recently conducted survey by CSA Research confirms that websites speaking to users in their native language have better engagement, longer site sessions, and increased conversions. Statistics show that 60% seldom or never buy from English-only websites.

In this regard, Webflow has recently introduced features (essentially a free preview of their native solution) that make it possible to make your website multilingual. With these new tools, you can design, build, and customize localized sites directly in the Webflow Designer. Here's what you can do:

• Build localized sites visually.
• Customize your locales.
• Automatically translate content natively.
• Direct integrations with translation management systems and flexible APIs (additional costs).
• Allow visitors to choose their preferred language.

With these features, Webflow can be localized to support the native context of your content but also fully optimized to address the native SEO value of the language you choose to translate your website to. 

Localizing Your Website Manually

If, on the other hand, you decide to opt for a manual alternative, there are workarounds, such as creating duplicate websites, that will give you the functionality manually.

However, this time-consuming solution would require you to create duplicate pages or duplicate websites. The process involves duplicating collection items using static pages, but this means you’ll be managing multiple pages for each language.

Bear in mind, though, that every time you make a change to the original content, you’ll need to involve a professional translator to translate the other language versions too. And, if you have several languages, such as French, German, Chinese, and so on, you can quickly see how time-consuming that task can become.

You’ll also need to manually set up language subdomains or subdirectories, and add hreflang tags to your source code so Google doesn’t flag the content as duplicate. These are 2 key features of multilingual SEO that will help your website appear in international search engine results.

Features You'll Need to Go Multilingual

Webflow’s novel localization capabilities offer a comprehensive translation solution, but it’s still missing a few features to make going multilingual even more convenient, including multilingual SEO, asset or media localization, and visitor language redirection at no additional cost. That’s where Weglot steps in. Weglot fully removes the complexity of website translation by offering a full suite of translation management features that add further value to your website translation project, with a clear pricing structure. 

With Weglot, you can translate your Webflow website on autopilot with integrated machine translation, zero development efforts, and swift translation management collaboration (a glossary, translation exclusions, etc) via 1 user-friendly dashboard.

Weglot’s effective solution was built for translating your Webflow website, allowing you to go multilingual on Webflow instantly so you can reach a global audience quickly. Apart from that, Weglot also offers significant SEO benefits as well, allowing you to choose between subdirectories or subdomains and automatically adding hreflang tags to your site, which will play a crucial role in aligning your website with Google’s best SEO practices for multilingual websites.

Lastly, let's look at pricing:

Tutorial: How to Add Multiple Languages to Webflow

In simple terms, the steps are as follows:

1. Create a Weglot account – this is where you’ll manage all your translations
2. Add your domain name, the native language of your site, and the languages you want to add (Note, if you’re using a temporary Webflow domain name use this integration or wait until you’ve purchased a custom domain to continue)
3. Next, configure your DNS records to create your subdirectories or subdomains (you can choose between both options with Weglot). Go to your domain name provider account and the DNS records tab. Create a new entry – select CNAME. Add the language code of the language you’re adding in ‘name’ and in ‘data’ add ‘websites.weglot.com’. Then click ‘check DNS’
4. The final step requires you to go to your Webflow admin area ‘Settings’ – ‘Custom Code’. Go to ‘Head Code’ and ‘Add code at the end of the head tag’. Copy and paste the JavaScript HTML snippet from your Weglot account
5. Save changes and publish your site by clicking on the blue button at the very top right

And that’s it - your Webflow site is officially multilingual, enhancing the user experience of your site for your international customers!

Weglot works by detecting, translating, and displaying your Webflow site instantly. We give you a first layer of automatic translation using leading providers DeepL, Google Translate and Microsoft (included in your monthly plan), together with full editing control to make edits to your site translations how you want. Whether you leave them as is, add a translation team to the project, or order pro translation directly in your Weglot project, we give you the choice.

Plus, it’s not just the words on your site that Weglot translates, but the complex issue of displaying that content. With automatically added language subdirectories or subdomains, your content is displayed without you needing to go through your dev team.

Webflow Language Switcher

When you reload your Webflow site, you’ll see a language switcher has been automatically added to the bottom right of your website. This is the default position once you’ve connected your Weglot account to your site.

The Weglot language switcher is neutral in its appearance. However, you can make a number of no-code changes to its appearance within your Weglot Dashboard, including adding custom CSS.

Or, you can clone one of the many custom language switchers we created with Finsweet, which you can find in our Webflow multilingual UI Kit. We've also recently released a second set of language switchers with Digidop.

Here's a look at the language switchers we made with Finsweet:

Check out the tutorial video to see how to add one:

And here's a look into the language switchers we made with Digidop:

Webflow Language Switcher Inspiration

We can put theory aside for a moment and take a look at the success stories of companies that used Weglot for adding multiple languages to their website and customizing their language switchers.

Weglot

Firstly, it would be wrong of us not to mention our very own Webflow site, Weglot 😉. We weren’t lying when we said we were fans of Webflow, and that’s reflected in our own choice of using it to display our global presence.

We went custom with our language switcher to fit our new branding. And as champions of website localization, we chose the native language name in ours to ensure the user experience is clear for our English, French, German, Italian, Spanish, Japanese, and Dutch website visitors.  

i-Mesh

The next example comes from textile creator i-Mesh who takes things a little more custom (which is only right if you use Webflow). 

They’ve added their language switcher in their left-hand sticky sidebar, so it’s visible to all website visitors scrolling on their site. And rather than going for language code or name, they’ve simply used half of the word, complementing the modern and simple style of their site. 

Language switchers don’t need to be complicated, and i-Mesh is a clear example of that.  

Big Blue

This logistics provider has gone for something slightly different both in terms of the position and design of their language switcher. It's located in the footer, with each language accompanied by a flag in the dropdown menu.

Whilst flags might not be everyone’s cup of tea, they do have their place – especially if you’re specifically doing business in the countries of the flags you’re using. 

(FYI where it’s not a good idea: e.g. if you’re hoping to do business with Spanish-speaking countries and use the flag for Spain, you’ll end up alienating Latin American countries). 

They initially used the subtleness of a language code. But then, they included the full language name, plus a flag in a dropdown, which makes the language switcher subtle yet eye-catching at the same time.

A Webflow Multi-Language Website, Instantly

We’ve talked you through the Webflow multi language process from start to finish and hopefully, you’ve now found the perfect solution for making your Webflow website multilingual.

And, for those wanting to customize, hopefully, we’ve taken a little bit of the work away from you by joining forces with Finsweet to create 14 different language switchers you can add to your site right now!

Website translation can help increase both the traffic and conversions of your site, leading to new customers in new markets.

Weglot pricing starts from €15 a month, and you can start your free 10-day free trial to get testing right away.