How to change the position of the language switcher?

In this article, you'll see the different methods to change the position of the Weglot language switcher depending on your integration

Using Weglot, by default, the language switcher will appear at the bottom right of your website. However, you have the possibility to change its position. To do that, you have several possibilities depending on your integration:

1. I'm using Wordpress
2. I'm using Shopify
3. I'm using another integration


1. How to change the position of the switcher on WordPress

a. Add the Weglot button to your menu

You can place the button in a menu area.

Go to Appearance > Menus. Select the menu where you would like the Weglot Language Switcher to be placed. Select 'Weglot Switcher' on your left, check the checkbox, then add it to the menu. Now you can drag and drop the switcher to change the order of the items in the menu

Click on "Save Changes" and refresh your website. The Weglot switcher is now on your main menu.

b. Add the Weglot button in a widget area

Go to your WordPress Dashboard > Appearance > Widgets

These widget areas depend on the theme you're using. This is the author of the theme who sets these areas.

Refresh your website, you'll see that the Weglot switcher is now in the selected widget area.

2. How to change the position of the switcher on Shopify

To add the Language Switcher to your menu, you can follow one of the 3 methods below, however, we recommend the first option.

a. Add the "Switchers" option to your Weglot.initialize code

Go to your  Shopify admin > Online Store > Themes > Action > Edit Code > Snippets > weglot_switchers.liquid.

You should see the following code (with your own API key in replace of YOUR_API_KEY):

<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” });</script>
<!--End Weglot Script-->

Add the following piece of code after “YOUR_API_KEY” (  just delete any of the old code after your API key):

,
	switchers: [
       {
           // Same as button_style at root
           button_style: {
               full_name: true,
               with_name: true,
               is_dropdown: true,
               with_flags: true,
               flag_type: "circle",
               invert_flags: false
           },
           // Move switcher somewhere in the page
           location: {
               target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
               sibling: null
           }
       }
   ]
   });
</script>

Important: don’t forget the comma after your API key.

The piece of code that’s important here is the “.header-nav” as this determines the location of your language switcher. This needs to be replaced with the CSS selector of the parent element where you want the language switcher to be placed.

⚠️ To find the CSS selector (the "target"):

  • Right-click on the element you want to place the language switcher into.
  • Go to "Inspect"
  • Use the arrow on the top left of the console
  • Right-Click on the element in the console.
  • Copy > Copy selector
  • Paste the code target field between the double quotes

So, for example, if you want to add it to your menu:

<nav class="menu">

Your target line will be:

target: ".menu",

You can find more information about this method in our Developer Documentation

b. The Weglot_here option

You can paste the code below into your Theme.liquid file (or into another liquid file), at the place you want the language switcher to be displayed.

<div id="weglot_here"></div>

c. Add the switcher as a menu item

Go to Shopify Admin > Online Store > Navigation. Click on the menu where you want to add your language switcher.

Then, click on "Add menu item" and add the languages you’ve already added to your store with Weglot.

In the ‘Name’ box add the language and in the link add #Weglot-language code. For example, for the English button add  #Weglot-en, for a French button you will have to add #Weglot-fr. Note that the capital letter on the 'W' is important. Example below:

Click on "Apply changes" and then "Save menu".

You also have the possibility of making your language switcher a drop-down menu. Again, click on ‘ Add menu item’. In the ‘Name’ box you can add ‘Languages’ for example, or however you’d like to call your language switcher in your menu, then add # as the link and click ‘Add’.

Then drag and drop the language items underneath 'Languages' so they become subitems.

You can find more information about this method in our Developer Documentation

3. How to change the position of the switcher on other integrations

a. Add the "Switchers" option to your Weglot.initialize code

Go to the page where is located your Weglot code snippet You should see the following code (with your own API key in replace of YOUR_API_KEY):

 <!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” });</script>
<!--End Weglot Script-->

Add the following piece of code after “YOUR_API_KEY” ( just delete any of the old code after your API key):

,
	switchers: [
       {
           // Same as button_style at root
           button_style: {
               full_name: true,
               with_name: true,
               is_dropdown: true,
               with_flags: true,
               flag_type: "circle",
               invert_flags: false
           },
           // Move switcher somewhere in the page
           location: {
               target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
               sibling: null
           }
       }
   ]
   });
</script>

Important: don’t forget the comma after your API key.

The piece of code that’s important here is the “.header-nav” as this determines the location of your language switcher. This needs to be replaced with the CSS selector of the parent element where you want the language switcher to be placed.

⚠️ To find the CSS selector (the "target"):

  • Right-click on the element you want to place the language switcher into.
  • Go to "Inspect"
  • Use the arrow on the top left of the console
  • Right-Click on the element in the console.
  • Copy > Copy selector
  • Paste the code target field between the double quotes

So, for example, if you want to add it to your menu:

<nav class="menu">

Your target line will be:

target: ".menu",

You can find more information about this method in our Developer Documentation

b. language hook

You also have the possibility to create languages elements into your native menu for example and link them with the translation hooks according to this guide

For instance, you create a "Languages" item menu with "English" and "French" as sub-menu.
English will have the link "#Weglot-en" and French will have the link "#Weglot-fr"

Note that the capital letter on the 'W' is important

c. Custom CSS

You can add custom CSS code to change the position of the language switcher directly into the "Custom CSS" field present on the page Language Switcher:

Still need help? Contact Us Contact Us