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

In this article, you'll find how to change the flags of the Weglot button in your website.

1. Using one of Weglot's image

Go to your website, right click on the flag you want to modify and click on "Inspect Element". You should see this:

Copy the URL of the image here:

Enter the URL in your browser, you should see this:

Right click on the image and select "Save as". Then, save the image in your folder. Open your folder again, right click on the file and select "Open with Paint" (or Mac OS equivalent), you should see this:

Locate the flag you want to display (e.g. the Belgian flag) and place your cursor on the left of the flag (see red line). Then, at the bottom left, you should see the number in pixels of the position of the flag within the image. Copy this number (3672px here).

Here the number is 3672px. Divide it by 2 and multiply by (-1). Then, go to Weglot Settings in your website admin, under the Override CSS and paste this:

.wg-li.flag-3.nl a:before {       	 
background-position: -1836px!important;   
}

Don't forget to change .nl by .fr or .en in the CSS selector if you want to modify another flag (e.g. French or English flag instead of Dutch flag here). You can find all the 2-letter language code  here.

Click on "Save" and refresh your website.

2. Using your own image

Follow this 2 steps guide to change the flags of the language button using your own image:

a. Go to your website, right click on the flag you want to modify and select "Inspect Element"

You should see this:

b. Go to Weglot Settings in your website admin, under section "Override CSS" 

Once you find it, paste this code:

.wg-li.nl a:before {       
background-image: url(https://my_picture_of_Dutch_flag.png)!important;      
}
  • Don't forget to change .nl by .fr or .en in the CSS selector if you want to change another flag (e.g. French or English flag instead of Dutch flag here). You can find all the 2-letter language codes here,
  • Paste the URL of your image between the brackets of "url",
  • If you want to change the shape of your flag, replace the previous URL by the URL of your new image.

Save and refresh your website.

Still need help? Contact Us Contact Us