How can I get a user's country code using JavaScript?

[Nor1]

Dear all,

do you know a good javascript solution to get user's country code? I need to make several custom notes based on the location of the visitor.

I tried searching around and this seemed to be a solution but somehow it doesnt work when i add it to my shopify store.

<script>
$.get("http://ipinfo.io", function(response) {
console.log(response.city, response.country);
}, "jsonp");

</script>

Do you know what could be the reason for that? The error message says: Uncaught ReferenceError: $ is not defined.

Or if you might have another working solution (but no apps), i would be very grateful.

Thanks!

[DevsIT]

-----------

[DevsIT]

Hi @Nor1,

Can you share your site link? We can help you to give solution.

Even customization support for it.

[Anonymous · Accepted solution]

Hi @Nor1 

Hope this message finds you well and safe. 

Aibek is here from Speedimize.io 

The error indicates that you do not have jQuery. https://www.w3schools.com/jquery/jquery_get_started.asp 

You can connect it via cdn before you receive the country data. That is, it should be as below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.get("https://ipinfo.io", function(response) { // we changed to https
console.log(response.city, response.country);
}, "jsonp");
</script>

There may still be a problem that you have jQuery, but it connects asynchronously. In this case, check whether there are attributes such as async defer in the jQuery tag. 

Hope that helps you.

[Nor1]

thanks a lot!!!

Actually, the problem was not in the jquery, but in the http -> https, as you indicated in your correction. After that, all worked flawlessly.

Thanks you 🙂

[Jaspbur756]

HI Speedimize,

That was extremely useful information, thank you for sharing.

I am looking for something similar, in that, I wish to display on a Page in my Store the shipping speed specific to the User's country (not the Shipping Zone or Rate, just information on a page similar to About Us).

How would I display information in the middle of an About Us page that says the shipping speed to the USA is 10 days (for example)?

Thanks in Advance,

Happy. 

[radiofranky2022]

Hi,

I'm trying to use your code to get geo URL redirect with a popup window.

I inserted the code into "header.liquid" but nothing came out.   Could you share some lights?  tks

[SuzanAli]

Yes, this works

[themusaib1]

<select>
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>

[thesunilyadav]

Hey @Nor1 
There is one other Shopify official solution to retrieve the user's country code.

1. First, install the free app (made by Shopify) called Geolocation. (App is installed by default on all stores nowadays)

2. Then put this JS code somewhere on that page inside < script > tags

fetch('browsing_context_suggestions.json')
.then(res=>res.json())
.then(r=> console.log("User Country", r.detected_values))

This will get the JSON containing the visitor information, and extract the 'detected_values.country.name' value from it.

To see all available information visit the URL below (replace 'store-name' with your store name)

store-name.myshopify.com/browsing_context_suggestions.json

Hope this finds you well!

[radiofranky2022]

Hi,

could you elaborate a bit where to add the code and how to get the country code from JSON?  I'm new to this and would like to extract the user country "handle" "US" to redirect url.   tks

{"detected_values":{"country_name":"Stati Uniti","country":{"handle":"US","name":"Stati Uniti"}},"features":{},"suggestions":[]} 

[thesunilyadav]

You can easily incorporate this into any JavaScript file or within a <script> tag wherever needed. Simply access the country handle by

detected_values.country.handle

[radiofranky2022]

If the country is not in the "market" list then it won't show the correct country code.    Is there a way to bypass the default geolocation app?   

[radiofranky2022]

Hi,

as u can see, the code is not being executed <script></script>

[mtrcommerce]

This is an awesome answer! thanks!