Shopify - Design - How to change the mobile button position?

In this article, you'll learn how to add or change a language Weglot switcher on the mobile version of your website.

If you are looking for having the Weglot switcher located in a specific area of the mobile version of your website, you'll need to follow these steps:

1. Create an extra Weglot button on the mobile version

You'll need first to create another Weglot button. To do so, go to your Shopify admin > Apps > Weglot Translate:

  • Select the mobile version at the bottom of the screenshot
  • Click on 'Add new language button'
  • Now, a button is displayed in the preview window. You can drag it and drop it where you want
  • Once the language button is dropped where you would like it to be located, save the changes

2. Add custom CSS code (optional)

If you want to apply custom CSS code to this specific button, you can add it to the  Override CSS section and use the  #weglot-switcher-2 id:

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

Some Shopify themes have 2 headers: one for desktop screens and one for mobile and tablet screens for responsive purposes. Adding an extra language switcher on the mobile version of your website can also make the 2nd switcher appear on desktop screens.

To hide the 2nd switcher depending on the width of the device screen, you'll need to apply a CSS media query rule, such as the following:

@media only screen and (min-width: 600px) {
  #weglot-switcher-2 {   
    display: none!important;  
  }
}

Still need help? Contact Us Contact Us