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 "Languages 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. Edit the language name and flag
To change the language name and flag, you can go to the same page, that is to say to your Weglot Dashboard > Projects > Select a project > Settings > Language switcher.
Go to the "Languages appearance" section and use the pen on the right.
There, you can edit the language name, to have the name you want displayed in your switcher on your live website:
Once you modified the "Local Language Name" section, you can click on the "Edit" button.
To change the flag, be sure that you activated the "Display language flags in button" option in your switcher settings.
In the "Languages appearance" section, click on "Select a flag" to select a flag (1). You may also use the search bar (2) to help you find a flag:
Now, go back to your website, and you will be able to see the newly added flag in the language switcher. Following our example, we have the United States of America flag below:
Also, if you want to remove the flag previously added and go back to the original flag, click on 'Select a flag' in the selector of flags, and it should remove the flag:
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. 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.
5. 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:
https://developers.weglot.com/javascript/link-hooks
Have any feedback on this article? Let us know!