How to add dynamic country flag?

1

Hi guys how can i add a country’s flag that’s dynamic? Meaning if the page is opened from Netherlands it shows their flag and if it’s opened from Belgium, it shows their flag.

2

Hey @Dipesh! :waving_hand:

Yes, that’s possible. You can use a small JavaScript snippet to detect the visitor’s country and then show the right flag.

For example, you can use an IP API like ipapi.co or ipinfo.io to get the visitor’s country code.
Then use that code to show the matching flag image — something like:

fetch("https://ipapi.co/json/")
  .then(res => res.json())
  .then(data => {
    const flag = document.getElementById("flag");
    flag.src = `https://flagcdn.com/48x36/${data.country.toLowerCase()}.png`;
  });

Just add an <img id="flag" /> where you want the flag to appear.

If that doesn’t work for you, share how you want to use it (for example: header, checkout, or landing page), and I’ll adjust the code for you.

1 Like