Shopify - 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 Shopify website.

1. Use the Switcher Editor feature
2. Add the language switcher to a menu
3. The Weglot here option
4. The switcher option

1. Use the Switcher Editor feature

The switcher editor allows you to move the language switcher in context on your website by dragging and dropping the button on a preview of your website
In order to use it, you can follow this article: How to use the Switcher Editor?

⚠️ Note that your website must be live and accessible in order to be able to use the Switcher Editor

2. Add the language switcher to a menu

You have the possibility to create your own language switcher in your main menu, for example, and then link it to the Weglot translations

In order to do that, 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" field, 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" and it's done.

Note that you can also display it as a drop-down menu.

To do that, click on " Add menu item" then, in the "Name" field, you can add "Languages" for example, then add # as the link and click on "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. 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>

4. The switcher option

You can also integrate the switcher manually to any elements present in your Shop by adding the "Switchers" option to your Weglot.initialize code

<!--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-->
	

,   
    switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    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>
	

<nav class="menu">
	

target: ".menu",