Shopify - Design - How can I change the flags of the language button?

In this article, you will find how to change the flags of the Weglot button on your website.

1. Using Weglot flags image

On your web browser, make a right click on the flag then select 'Inspect Element'. The inspector should show up with a focus on the flag element in the code.

In the case of this example, let's say the Brazilian flag has to be changed to the Portuguese flag:

Open the <a> element with the array on the left, there should be a pseudo-element 'before'. Select it:

Copy the full CSS rule that is displayed on the right, regarding the background-position property:

In the case of this example for the Brazilian flag, the code copied is:

.wg-li.flag-1.pt a:before {
    background-position: -993px 0;
}

Paste this code in your Shopify App 'Custom CSS' field (Shopify admin > Apps > Weglot Translate App):

Now, depending on the type of flag chosen on your website and the flag you would like to apply, you'll need to replace the number of pixels by one of the following:

Rectangle Mat Flags:

Flag Number of px
Germany -2490
Brazil -6630
Hong Kong -3600
Mexico -4320
Portugal -1740
UK -1920
US -3570

Rectangle Bright Flags: 

Flag Number of px
Canadian -1281
Portuguese -5921
UK -7777
US -7841

Circular Flags:

Flag Number of px
Canadian -4224
Hebrew -1608
Mozambique -288
UK -2520
US -2712

If you would like to select a flag that is not in these above tables, you can contact our support team for help!

In the case of the Brazilian flag, the type of flag is 'Rectangle Bright' on the test website:

So the number of pixels for the Portuguese flag with the 'Rectangle Bright' is -5921. You'll also need to add '!important' so that the custom rule would override the other CSS rules. The CSS code to apply is so:

.wg-li.flag-1.pt a:before {
    background-position: -5921px 0!important;
}

After the changes are made, click on 'Save':

Now the flag for the Portuguese language is the Portuguese flag:

2. Using your own flag image

You can also use your own image to customize the flags on Weglot switcher on your website.

a. Inspect the element on your browser

On your web browser, make a right click on the flag then select 'Inspect Element'. The inspector should show up with a focus on the flag element in the code:

Open the <a> element with the array on the left, there should be a pseudo-element 'before', select it:

Copy the full CSS rule that is displayed on the right, regarding the flag you would like to edit (here it is the rule that includes 'pt' for the Portuguese flag):

The copied code should be:

.wg-li.flag-1.pt a:before {
    background-position: -993px 0;
}

b. Add the CSS code to customize the language flag

Go to your Shopify admin > Apps > Weglot Translate, in the 'Custom CSS' field, paste the code and replace the CSS property by a background-image and replace the URL by the actual URL of your own image. Also, add '!important' at the end of the rule so that it overrides the other CSS rules:

.wg-li.flag-1.pt a:before {
    background-image: url(https://portuguese-flag.com/my-image.jpg)!important;
}

After the changes are made, click on 'Save':

Still need help? Contact Us Contact Us