‍Making your Webflow website multilingual? Then you’ve landed on the right article.

Not only will we show you how to add multiple languages to your Webflow site, but also:

• How to customize your language switcher
• Share our cloneable language switchers to add to your site instantly
• Showcase some Webflow multilingual sites for custom language switcher design inspiration

Let’s get started!

Step 1: Create a Multilingual Website

To have the function of a language switcher, you’ll need to make your Webflow website multilingual. There are a couple of options, either using Webflow’s native solution, Webflow Localization, or Weglot.

No matter whether you’re building a multilingual Webflow site from the beginning or later in the process, either option can work. Plus, both solutions allow you to edit offline, so you only need to go live with your translated site when ready.

Webflow Localization vs Weglot

We’ve written a fully comprehensive comparison article so you can choose the option that best suits your website translation needs.

But if you’re in the TL;DR camp, then here’s a quick summary:

For the purposes of this article, we’ll look at how to add our solution, Weglot.

Add Multiple Languages to Webflow with Weglot: A Quick Tutorial

Adding languages to your Webflow site takes just 5 minutes with Weglot. Check out the video, or follow the written steps below.

1. Create a Weglot account. A unique difference between Weglot and Webflow Localization is that you’ll manage and edit all your translations through a separate interface, allowing for multiple people to make edits at the same time. There won’t be any risk to the code on your site and no need to purchase additional Webflow seats (or a 3rd-party TMS).
2. Give your project a name, select Webflow as the technology, choose the current language of your site and the new languages you want to add. some text
   1. ~Note, you can also add custom languages like Brazilian Portuguese or British English.
3. Add your website URL and choose whether you want subdirectories or subdomains.
4. Configure your DNS entries in your domain name provider.
5. Add the JavaScript snippet of code given to you in the setup process and add to the “Head” of your Webflow site. This will add the standard dropdown language switcher to your site, which you can later edit with custom CSS or one of our cloneable switchers.

And that’s it—you’ve now got a fully multi-language site up and running. Note that if you don’t wish for it to be live yet, just switch off ‘make public’ in your dashboard and continue editing offline.

With Weglot, you can add 110+ languages to your site in just a few clicks. With a first layer of AI translation, you get complete editing control over your translations.

Now, for the fun part, customize your language switcher to fit your web design.

Customize Your Language Switcher: No-Code

Once you’ve added Weglot to your Webflow project, a language switcher will automatically be added to the bottom right of your website.

The first option for editing this is using our simple language switcher visual editor. This allows you to easily drag and drop your dropdown switcher to a different location within your website design.

You can also select a number of simple design changes, including:

• Display the language name
• Add flags
• Display the language code
• Change the size

This useful feature also allows you to see your switcher on mobile devices. That way, you can make custom edits that ensure the user experience remains unchanged regardless of screen size.

Cloneable Webflow Language Switchers

Next up are the cloneable options, so you won’t need to lift a finger when it comes to design.

As big fans of Webflow here at Weglot HQ, we’ve teamed up with two leading Webflow agencies to create cloneable language switchers you can add to your multilingual site without custom code.

Back in 2020, we worked with Finsweet on 16 different language switchers with our UI kit. More recently, in early 2024, we designed a further 5 new designs with Digidop.

In fact, our language switcher collaboration with Finsweet was so popular they were cloned more than 8,000 times.

So, you can now choose from 21 different designs and templates, which you can easily add through the Webflow designer.

Check out the Digidop drop 👉here (with tutorial), and watch Finsweet’s Webflow tutorial on adding one of their custom language switchers.

Language Switcher Inspiration From Webflow Weglot Users

And to finish things off, let’s look at some language switchers live on some Weglot x Webflow projects.

9AM

Is that a Weglot x Finsweet language switcher we spy? It most definitely is. Mexican creative agency 9AM has cloned one of our 16 premade switchers, and it  seamlessly integrates with the overall site design.

A simple color change means they customize it one step further to fit their design needs.

Napta

French resource management software Napta chose Weglot to launch its expansion in Europe thanks to our automation features.

These greatly reduced the team's internal translation management workflow, which was entirely manual prior to finding a translation plugin.

“Having a multilingual website and being able to manage it without any technical capabilities, coupled with the time-saving process of manually optimizing things that are already translated has been a game changer for our multilingual SEO performance.”

Estelle Barthes, Communications and Content at Napta

And that language switcher? Placed in the navbar (a common theme, it would seem!), it matches perfectly with the rest of their site.

And by choosing the language code, they’ve made it clear that their site has multilingual functionality.

Bielik

A cryptocurrency trading platform, thanks to Weglot, this company’s Webflow website is 100% translated—right down to the homepage animations. So, both Polish and English visitors have the same user experience no matter where they’re from.

And, in terms of the language switcher, placed directly in the navbar, it’s the first thing visitors will see when looking at the navigation of this site.

Marvin Mischewski

Next, Mallorcan real estate agency owner Marvin Mischewski has added a discrete language switcher to his multilingual Webflow website. Again, nestled in the navbar, German and English site visitors can instantly select their language of choice before reading further.

What’s more, with Weglot’s subdirectory integration, this realtor’s website is also visible on international search engines, top marks for international SEO!

Armor Wallet

Last, we have an AI-powered Web3 wallet called Armor Wallet. Following the same theme as Napta, they’ve also gone for a dropdown with the language code rather than the full language name.

And, once again, we’ve noticed a Weglot x Finsweet language switcher design cloned straight into their site! With Japanese and simplified Chinese on their site, the overall design has stayed the same, regardless of the different character lengths of each language.  

Design the Webflow Language Switcher of Your Choice

You’re now ready to implement the language switcher of your dreams to your multilingual Webflow website!

Remember to check out the custom cloneable switchers you can instantly add to your site without the hassle of coding. And if you’ve yet to take the multilingual plunge on Webflow, make sure you test out Weglot with our 10-day, no-commitment free trial.