Shopify - How to change the position of the language switcher?

In this article, you'll learn the different methods to change the position of the Weglot language switcher depending on your Shopify website.

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 in a live preview.

—> Follow this guide for details: How to use the Switcher Editor?

2. Add the language switcher to a menu

You can also create your own language switcher inside your Shopify menu and link it to Weglot translations.

To do this:

1. go to Shopify Admin > Online Store > Content > Menus:

2. Select the menu where you want to add your language switcher.
3. Click on " Add menu item" and add the languages you’ve already added to your store with Weglot:

4. In the " Label" field, add the language,
5. In the "link" add #Weglot-languageCode.

Example below:

Click on the tick to validate and then "Save " 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 "Label" field, you can add "Languages" for example, then add # as the link and click on the tick.

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 place the switcher anywhere by adding the following code inside your Theme.liquid file (or another Liquid file):

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

This will insert the language switcher exactly where you paste the code.

4. The switchers option

Another option is to manually add the switcher to any element by including the switchers option in your Weglot.initialize code.

To do this:

1. 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 instead 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-->

2. Insert the following code after "YOUR_API_KEY” (simply delete any previous code after your API key):

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

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