Shopify - Design - How can I change the Weglot button position?

In this article, you will see two ways to move the Weglot button to your Shopify website.

First option:

You have to go to your  Shopify Dashboard > Apps > Weglot.

Select the desktop version at the bottom of the screen,

  1. Click on 'Move the language button',
  2. The switcher will appear in the middle of the screen and you'll be able to drag it and drop it where you want!
  3. Save your changes.

If you have multiple buttons and want to apply CSS rules to this specific button (initially named Button N°1), go to your Override CSS and use the #weglot-switcher-1 id:

#weglot-switcher-1 .country-selector {
     left: 30px;
}

Second option:

1. Choose the location

Go to your website, right click where you want to put the Weglot button and click on "Inspect Element". You should see this:

2. Identify the class of the block

a. On the desktop version

b. On the mobile version

You can do it by pressing F12 or Inspect Element and click on the phone icon.

3. Browse your website's source code

Go in the Shopify Dashboard > Online theme > Actions > Edit HTML/CSS > theme.liquid (or Sections > header.liquid) and find the block that have the right class name.

4. Add our short code

a. Desktop version

Paste <div class="weglot_here"></div> 

    b. Mobile version

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

5. Click on "Save" and refresh the website 

6. Fine-tune the location of the Weglot button

You can adjust it with some CSS rules. You can use media queries for the mobile version.

Still need help? Contact Us Contact Us