App reviews, troubleshooting, and recommendations
Is the underlying API behind this new app available or documented anywhere - https://apps.shopify.com/geolocation
Would love to use it to show location specific promos or delivery information on catalog pages.
Solved! Go to the solution
This is an accepted solution.
Just a note that this is now documented here:
So a little poking around and you can call the following endpoint on your store.
/browsing_context_suggestions.json
This gives you a simple object below
{ "detected_values": { "country_name": "United Kingdom" }, "suggestions": [] }
Which you can parse and use a if/else of switch statement to show or modify elements on your site via JS.
The query string options for the endpoint that are generated by the app include the below:-
source=locale_bar_app currency[enabled]=true currency[exclude]=USD language[enabled]=true language[exclude]=en
With the response changing to:-
{ "detected_values": { "country_name": "United Kingdom" }, "suggestions": [ { "parts": { "currency": { "handle": "GBP", "name": "British pounds", "confidence": 1, "options": { "CAD": "CAD $", "DKK": "DKK kr", "EUR": "EUR €", "GBP": "GBP £", "SEK": "SEK kr", "USD": "USD $" } } }, "confidence": 1 } ] }
Would be great if there's some documentation out there for these options. As using this native functionality would be nicer than needing to rely on third party IP to Country solutions.
If you run your app backend/API on Google AppEngine, then Appengine provides a few location related headers for every request. See below.
Since Shopify runs on GCP, this is probably how they get it.
That's great however I'm more interested in being able to make use of the endpoint via AJAX on a store.
Say enabling a merchant to have a few options for showing delivery rates for a country in the page header maybe.
That will allow merchants to avoid needed to use external services, just some custom code in their theme.
hi,
probably it become from Cloudflare directly.
Shopify uses Cloudflare for dns and cdn
Thanks Stephen,
That's really helpful.
Is there an easy way to turn that endpoint into a JS variable with the name of the country?
Thanks!
Mike
Should be able to fetch the endpoint parse as JSON then:-
yourJsonObject.detected_values.country_name
Thanks Stephen,
I share the complete code in case it is useful for anyone else.
<script>
async function load() {
let url = 'https://*****************.myshopify.com/browsing_context_suggestions.json';
let obj = await (await fetch(url)).json();
window.alert(obj.detected_values.country_name);
}
load();
</script>
Hi Stephen and thanks for sharing this surprisingly undocumented feature. I tried it via Postman and it works well... on principle.
However, when I try making the request from a theme file, I get a CORS/CORB errors. What is the correct way to call the Shopify API from theme files?
If you are calling it via client side code on your site, CORS should be fine.
For example if you call it using a URL like this, rather than specify a domain.
jQuery.get('/browsing_context_suggestions.json', (d) => {
// do something more interesting than console
console.log(d);
});
You're a legend, thanks Stephen!!
Hi!
This is exactly what im looking for, a way to check country code and display different content in banners for different countries without an app.
However. Not sure how to follow your examples.
I want to do this in theme.liquid. Would this work?
<p id="country_banner">country</p>
<script>
jQuery.get('/browsing_context_suggestions.json', (d) => {
if (obj.d.country_name == 'SE'){
document.getElementById("country_banner").innerHTML = 'Sweden';
}else{
document.getElementById("country_banner").innerHTML = 'not Sweden';
}
});
</script>
Can you help out with this? Not sure how to call for the country name in (d) really.
The callback is passing d, however you’re trying to access obj.d which hasn’t been defined.
would be
d.detected_values.country_name
Will also return Sweden rather than SE I think.
Hi!
Thanks. Still not getting the script to work thou, grateful for further assistance.
I am adding this to theme.liquid just before the end body tag.
<p id="country_banner">country</p>
<script>
jQuery.get('/browsing_context_suggestions.json', (d) => {
if (d.detected_values.country_handle == 'SE'){
document.getElementById("country_banner").innerHTML = (d.detected_values.country_handle);
}else{
document.getElementById("country_banner").innerHTML = 'not Sweden';
}
});
</script>
There is no country_handle, there is country.handle however.
If you are unfamiliar with JavaScript I would recommend hiring a developer possibly.
Hello,
I want to what is /browsing_context_suggestions.json this and any limit of this?
any document for this?
this is come from by default from shopify?
This is an accepted solution.
Just a note that this is now documented here:
Hey Stephen, thanks for your work here - really interesting.
Could you indicate to me how I would be able to use the "country_name" attribute as a liquid variable? I simply tried using {{country_name }} to output the country in a div, but wasn't successful.
I am not yet familiar with anything regarding API, so sorry if the question seems stupid to you.
The geolocation API is not liquid based, but JS for aiquid based solution this might help https://shopify.dev/themes/internationalization/multiple-currencies-languages
however that will rely on the localisation form selection rather than the IP to Geo solution achieved by the JS solution
For me, thats always "Germany", no matter the selected country. I choosed to use the localization cookie to detect the country.
The selection of the dropdown won't affect the API response as the API is telling you what country you are making a request from. Presumably you are in Germany or routing your internet connection via there?
Yeah, I'm in Germany. So, my solution now is neither the Request nor the cookie. I use
{% if localization.country == "Österreich" %}
// ...
{% else %}
// ...
{% endif %}
So my fallback is "Deutschland"
Thank you StephenK
That API is working.
Hi there!
If you want to use geolocation API, here is one worth checking out: Geo Targetly.
Its particular Geo Redirect tool can access your website visitors' location information easily using IPs. You can just drop in the Javascript code they provided and get visitors' location using simple JavaScript variables and geolocation html tags. Regarding that you like to show location specific promos or delivery information, its Geo Content tool could be your choice. It can alter almost any content on your webpages based on your visitors' locations, like banners, headlines, texts, etc...Location-specified content can be set up using its inbuilt HTML editor.
Hope it helps. Feel free to reach out if you have any questions.
looks like the endpoint now returns a country object containing name and handle (ISO country code I think) in the detected_values object.
{
"detected_values": {
"country_name": "United Kingdom",
"country": {
"handle": "GB",
"name": "United Kingdom"
}
},
"suggestions": []
}
Hi! Thanks for you help.
Still not getting this to work thou... Id rather use this function than installing yet another plugin if I can.
This should be all i need i think but no...
<p id="country_banner">country</p>
<script>
jQuery.get('/browsing_context_suggestions.json', (d) => {
if (d.detected_values.country.handle == 'SE'){
document.getElementById.("country_banner").innerHTML = (d.detected_values.country.handle);
}else{
document.getElementById.("country_banner").innerHTML = 'not Sweden';
}
});
</script>
As would be shown in the console, there is a syntax error with a dot before the opening bracket here:-
document.getElementById.("country_banner").innerHTML
It should just be
document.getElementById("country_banner").innerHTML
As mentioned before if you are not familiar with JavaScript you should probably hire a developer who is.
Yeah sorry!
Fixed that however i get jquery no loaded. I thought this was natively supported in shopify?
Do i need to include a Jquery lib in the head section or?
Kindly / Lasse
If jQuery is being loaded after this snippet of code it might not work.
Say if your snippet is in the middle of a template and jQuery is loaded just before the </body> tag
Hi! Im not loading jQuery, I thought this was a native function for shopify and that shopify loads jQuery.
Iam running trhis snippet just before </body> in the theme.liquid file.
Shoiuld o load something like <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
in head?
Do I need geolocation app for this to work?
Kindly / Lasse
What's your store URL, that's probably the easiest thing to do here?
the function is not live as i have not gotten it to work yet.
Hi StephenK,
Thanks for sharing the instructions and information. It's been a big help.
The screenshot below was taken from the Geolocation app page, developed by Shopify.
Are you (or anyone here) able to turn on the "change shipping country" option? Can it even be done?
I was thinking of the following use case;
Thank you in advance. Cheers!
I'm not sure the Geolocation app is designed for the expansion stores method of internationalisation I think it's more for the single site that has multiple shipping countries and languages set up in the settings.
If you have expansion stores I would assume you are on Plus and should be able to contact the Shopify Plus Specialists to help decide the best approach.
I am sorry to say that the Plus specialist hasn't been helpful in this area 😕
At the same time, I am quite paranoid that I may have missed some settings that caused some options in the Geolocation app to not show.
So let's say for a single site that has multiple shipping countries set, how does it help in language and currency localisation using the Geolocation app?
I have tried to include more shipping countries under Settings > Shipping and delivery > Shipping > manage rates. But, nothing special showed up like the one shared in the screenshot by Shopify.
Hoping that my paranoia to be untrue and that the community can help verify.
The geolocation app will show you a preview of how the app will appear to users.
However when you visit your store it will likely not show as I assume you are in the same country as your store. Unless you try using a VPN to test it.
Have you read through the docs for the app here - https://help.shopify.com/en/manual/cross-border/geolocation
You brought up a good point. Will test with VPN.
While reading the docs again, I think the session may have confused me.
As quoted, “After a recommendation for a different country or region is accepted or dismissed, your customer won't see another recommendation in your store for 14 days. This wait time is reset if the customer clears their cookies.”
Will test that too and update here if I see anything different.
This is a fantastic hidden feature with lots of great uses. Here's a quick JS snippet you can use to get useful GeoIP info using vanilla Javascript:
fetch('/browsing_context_suggestions.json').then(res => res.json()).then(location => {
console.log(location?.detected_values);
});
I found some information on this in the shopify dev doc, not amazing but better than nothing: https://shopify.dev/docs/themes/markets/localization-discovery
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024