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.
With Weglot, you can customize the appearance of your language switcher. There are several ways to do this:
1. Change the language switcher options
To customize your language switcher, go to your Weglot Dashboard > Projects > Select a project > Settings > Language switcher.
From there, you can customize several display options, including:
- The language name (for example "en" for English)
- 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".
Further down the page, you'll find the Languages Appearance section. Here, you can drag and drop languages to change the order in which they appear in the language switcher.
This section lets you customize the flags and language names displayed in your 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 have modified the "Local Language Name" section, you can click on the "Save" button.
To change the flag, be sure that you have activated the "Display language flags in button" option in your switcher settings.
You can also click on "Select a flag" to select a flag. You may use the search bar to help you find a flag:
Now, go back to your website, and you will be able to see the newly added flag in your language switcher.
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 will 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!