Introduction

The success of e-commerce websites is no longer only dependent on the quality of goods and services offered but small innovations  which gives the website a competitive advantage in one way or the other. The user experience is what will ultimately keep users on your website or make them jump ship to other sites. Having  multiple languages to cater for different users  goes a long way in enhancing the user experience and drawing potential customers to your ecommerce website.

Thankfully, webflow has a language switcher which makes the process of integrating multiple languages easy and quick. In this tutorial we will walk through how to add and make use of the language switcher on webflow.

The Solution

What is a Language switcher?

A language switcher is a tool that allows your website users to choose the language they would like to view your web content in. This means that a French or Dutch speaker can browse your ecommerce website in their native language regardless of the original language the web content was written in.

This option can be enabled automatically for them or with a simple click of a button. Language switchers also make the website owners life easier as they do not have to manually write translations for everything they had originally written on the site.

Manually translating web content on different pages is not advised as this could make it hard for search engines to rank your website properly if not properly optimized..

How to Get Started

In order to get started, you will need to set up a Weglot account. This provides the dashboard where you will manage all your translations. There is a free plan and an option for a free trial first – should you choose the paid for plan. The paid for plan is only needed when you have more than 2000 words on your website.

Step by step guide

  1. Once your Weglot setup is complete click the “clone” button on the top right.This will enable you to get into the webflow editor.
  2. Click on the Navigator tab drop down menu.There you see a “wg-element-wrapper” and “wg-code” option for all the different language switchers.
  3. Copy and paste these to your websites in order to choose and use the language switcher of your choice.
  4. Paste the “wg-element-wrapper” where you’d like it to appear, for example -let’s say you add it to the navbar menu.
  5. Copying and pasting the first part will immediately make the language switcher visible on your Webflow site.
  6. Go to UI Kit and select the language switcher you would like to clone and click the “wg-code” element. Head over to the right-hand menu and select  settings. Thereafter click on “Open Code Editor” to get the code.
  7. Copy the code and head over to your  webflow settings and paste it into the body tag of your page. Remember to select save and publish in order to make it visible on your site. Make sure you also remember to replace the placeholder API key with your actual API key. This can be found on the Weglot dashboard.

Click on project settings in your weglot dashboard  and head to the language switcher section. Add “.weglot-container{display:none;}” to exclude the weglot language automatically added to your website by default.

Sign up for Weglot and start translating your website today!