How to change the design of the language switcher?

In this article, you’ll learn how to customize your language switcher and change how it looks.

Using Weglot, you can change the design of your language switcher. To do that, you have several possibilities:

1. Change the language switcher options

If you go on your Weglot Dashboard > Projects > Select a project >Settings > Language switcher, you'll have the option of changing some elements and display:

  • The language name (such as "en" for English, for example)
  • The full language name
  • The language flags and the type of flags (square, circle, rectangle)
  • The type of switcher (list/dropdown)

If you make any changes here, make sure to click on "Save changes".

You can also find the "Switcher Appearance" section further down on the page, where you can drag and drop the language you want and change its position in the language switcher:

This section allows you to change the flags displayed on your language switcher. You can display the flag of another country or your own flag. You can also modify the language switcher's appearance by changing the names of the languages and the flags displayed. (See: How can I change the flags of the language switcher?)

2. Add some custom CSS

On your Weglot Dashboard > Settings > Language switcher, you have the option of adding some custom CSS:

Feel free to get inspired by different styles and add your own CSS. You'll find some examples of custom CSS in the next part.

3. Use the Switcher Editor

For general usage of the Switcher Editor, please consult the following dedicated documentation:

How to use the Switcher Editor?

You'll find several sections inside it to create your own switcher design or to use some of the Weglot templates.

To use one, please check the Switcher style section:

Once inside the section, you'll find a batch of templates to use for your website.

Just click on it to select one and place it wherever you want on your webpage.

4. Create your own custom switcher

If you prefer to have your own designed switcher to match your website CSS codes, you can create a custom switcher.

You'll need to set up its design yourself and use the Weglot functions to have the links target your chosen languages.

To do so, please take a look at our developer documentation about useful JavaScript functions to use:

Have any feedback on this article? Let us know!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us