Webflow tutorial: How to go multilingual

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

With its ‘no-code’ philosophy, Webflow is an all-in-one site builder platform and visual web design platform that literally lets you design, create and build fully responsive websites from scratch without using plugins. Its interface largely resembles the likes of Adobe Photoshop – making it a familiar ‘face’ for designers.

It’s a blend between design and web development, without the need to learn code (HTML/CSS) or contact contact a freelance developer or web designer. It makes it a winner for those looking for something a bit more robust than other CMS platforms like WordPress. 

And, we’re big lovers of Webflow design tool here because of the flexibility it’s brought to many of our customers (you might want to check out a few of our favorite websites here). We’ve even built our own Webflow website with the help of web agency – Finsweet – which you’re free to clone. 

Whilst Webflow itself is pretty flexible, it doesn’t offer a native solution for everything. And, one of those is a multilingual feature. 

For those toying with the idea of creating their digital presence on Webflow, or if you’re ready to turn your Webflow site multilingual then we’ll show you step-by-step how in this Webflow language switcher tutorial, plus give you some pretty cool language switcher options you can clone right now.

So, first things first, why use a translation solution to take care of making your Webflow site multilingual? Up until this point you might have seen that the only option so far is to make duplicate websites/pages or collections and add a language the ‘traditional’ way. 

The problem here is that they will all fall under the same URL, so in fact, although you’re offering your Webflow site in more than one language, you aren’t actually getting the benefits of a multilingual website as it’s unlikely you’ll be found by your new audience (essentially the Google search engine bots aren’t ranking you). 

Why? Because search engines will view your site as having duplicate content – it doesn’t matter that it’s in a different language if it all falls under one URL. 

And, that’s just the displaying part. There’s also the content translation you’ll have to sort out separately (which can be time-consuming plus costly, especially if you have hundreds of pages on your site). 

The first part of this tutorial will be to integrate Weglot. This is a simplified integration, you can view the full process here including screenshots and GIFs. But, 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 original 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 your proper domain name)
3. Configure your DNS to create your subdomains. Go to your domain name provider account and go to your DNS tab. Create a new entry – select CNAME. Add the language code of the language you’re adding in ‘name’ and in ‘data’ add websites.wegot.com. Then click ‘check DNS’
4. Next 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 snippet from your Weglot account 
5. Save changes and publish your changes by clicking on the blue button at the very top right

We’ve also got a brand new video tutorial taking you through the exact steps needed to create a multi-language Webflow site:

So, you’ll now see when you reload your website that a language switcher will appear on your Webflow website. And, by default Weglot places your language switcher in the bottom right of your website once you’ve connected your Weglot account to your site. 

The Weglot language switcher is neutral in its appearance and, as a Webflow user we’re going to presume it’s pretty likely you’ll want to control exactly how your language switcher looks and personalize it to fit the unique look and feel of your new multi-language site. 

And, we’ve partnered with Finsweet again to create a custom set of language switchers you can clone and add to your site! Find them all in our multilingual UI Kit here. 

The first thing you’ll want to do is click on the ‘Clone” button on the top right of our UI Kit. Once you’re in the Webflow editor you can then grab the button you want to use. 

Go into the “Navigator”: 

You’ll then see the various language switchers – when you click on the drop-down, you’ll have both the “wg-element-wrapper” and “wg-code” for each language switcher. 

You will need to copy and paste both of these to your site to use the particular language switcher of your choice. 

First copy the “wg-element-wrapper” where you’d like it to appear. For the purposes of this Webflow tutorial, we’ll add it to our nav menu.

Pasting the first part will immediately make the language switcher visible on your Webflow site. 

Then go back into the UI Kit, click on the switcher you want to clone, and click the “wg-code” element. In the right-hand menu click on the settings to get the code and click on “Open Code Editor”. 

Copy and paste the whole script that’s available to you. Go into the page settings of your Webflow website and paste the code into the body tag of your page. 

Click save and publish so it’s visible on your website. Note: remember when you’re copying the code, to replace the API key with your actual API key, made available on your Weglot dashboard. Otherwise, the translations won’t show. 

You’ll also need to pop back into your Weglot dashboard and go to the “Project Settings” section. Scroll down the page and in the “Language switcher” section add “.weglot-container{display:none;}” to exclude the automatically added Weglot language switcher from your website. 

That’s it if you want to clone one of the exact language switchers we’ve created for you! For those that want a little more customization, need to change the language of the UI component or to see the full tutorial check out this full Webflow language switcher video: 

We’ve shown you how to clone the language switchers we’ve created with Finsweet – but it’s also good to see some examples of real companies using Weglot to add multiple languages and how they’ve customized their language switchers. 

They’ve all gone totally custom here – just like all good Webflow users.

Atelier 457

This French Webflow ecommerce store knows how to do minimalist. With a simple menu bar separating products by ‘wear, carry, objects, know’ you can bet they decided to keep things simple when it came to their language switcher. 

Deciding against the usual bottom right position, they’ve added it above their main menu – so there’s no problem here when it comes to site navigation. 

Instead, their positioning is subtle and well-placed for a user to easily switch between French and English. And, in terms of style? They’ve gone for the universally recognizable two-letter language codes EN and FR without a drop-down menu – which again echoes the simplicity of their already minimalist site navigation. 

i-Mesh

The next example comes from textile creator i-Mesh who take 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. Positioned right next to their logo makes this language switcher a focal point.  

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). 

At first they used the subtleness of a language code, but then included the full language name, plus a flag in a drop-down. They were also pretty smart and added their language switcher in the footer as well as the header so the user is fully aware of the language-switching capabilities of their business website.  

We’ve talked you through the 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 working with Finsweet to create 14 different language switchers you can add to your site right now! 

Ready to start translating your Webflow website? Start your 10-day free trial.