Shopify - How to change the position of the language switcher

In this article, you will learn how to change the position of your language switcher and add it to your menu

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

1. 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",
               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:

  • 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
  • Click on the element you want to place the language switcher into.
  • Copy the class or the id of this element.
  • Paste the class (add a dot before the class) or the id (add a # before the id) in the box, then click on "Add"

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

<nav class="menu"><br>

Your target line will be:

target: ".menu",

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

2. 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

Finally, don't hesitate to contact us at support@weglot.com if you have any trouble changing the language switcher position.

Still need help? Contact Us Contact Us