Re: Geolocation app - API

Solved

Is the API for the new geolocation app accessible for custom promotions?

StephenK
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Accepted Solution (1)
JamesTiplady
Shopify Partner
4 2 3

This is an accepted solution.

Replies 38 (38)

StephenK
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
AdSimpli
Tourist
8 3 3

If you run your app backend/API on Google AppEngine, then Appengine provides a few location related headers for every request. See below.

https://cloud.google.com/appengine/docs/standard/python/reference/request-response-headers#app_engin...

 

Since Shopify runs on GCP, this is probably how they get it.

https://apps.shopify.com/adsimpli
StephenK
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
paoloc
Shopify Partner
2 0 1

hi,
probably it become from Cloudflare directly.
Shopify uses Cloudflare for dns and cdn

mikem31
Shopify Partner
10 0 9

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

StephenK
Shopify Partner
80 7 46

Should be able to fetch the endpoint parse as JSON then:-

yourJsonObject.detected_values.country_name

 

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
mikem31
Shopify Partner
10 0 9

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>
G_Popov
Visitor
2 0 1

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?

StephenK
Shopify Partner
80 7 46

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);
});

 

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
G_Popov
Visitor
2 0 1

You're a legend, thanks Stephen!!

Lassepappa
New Member
10 0 0

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.

 

StephenK
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Lassepappa
New Member
10 0 0

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>
StephenK
Shopify Partner
80 7 46

There is no country_handle, there is country.handle however.

If you are unfamiliar with JavaScript I would recommend hiring a developer possibly.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
howdy3
Shopify Partner
1 0 0

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?

JamesTiplady
Shopify Partner
4 2 3

This is an accepted solution.

leonkl
Tourist
21 0 1

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.

StephenK
Shopify Partner
80 7 46

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

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
SKlocke
Shopify Partner
18 2 2

For me, thats always "Germany", no matter the selected  country. I choosed to use the localization cookie to detect the country.

 

SKlocke_0-1669974610452.png

 

StephenK
Shopify Partner
80 7 46

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?

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
SKlocke
Shopify Partner
18 2 2

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"

Leocxy
Shopify Partner
10 1 3

Thank you StephenK

That API is working.

MichaelGeo
Pathfinder
194 3 17

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.

StephenK
Shopify Partner
80 7 46

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": []
}

 

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Lassepappa
New Member
10 0 0

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>
StephenK
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Lassepappa
New Member
10 0 0

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

StephenK
Shopify Partner
80 7 46

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

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Lassepappa
New Member
10 0 0

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

 

 

StephenK
Shopify Partner
80 7 46

What's your store URL, that's probably the easiest thing to do here?

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Lassepappa
New Member
10 0 0

the function is not live as i have not gotten it to work yet.

Tom13
Shopify Partner
9 0 5

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;

  1. Show a popup like in the screenshot
  2. Depending on the shipping country selected, direct the customer to the corresponding expansion store
  3. Things such as "Inventory", "Pages" etc. will be configured differently in each expansion store thereby achieving the localisation we need.

 

ECEAE=.jpg

Thank you in advance. Cheers! 

StephenK
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Tom13
Shopify Partner
9 0 5

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.

StephenK
Shopify Partner
80 7 46

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

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Tom13
Shopify Partner
9 0 5

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.

cfx
Shopify Partner
31 2 15

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&colon;

 

fetch('/browsing_context_suggestions.json').then(res => res.json()).then(location => {
  console.log(location?.detected_values);
});

MaxDesign
Shopify Partner
214 15 86

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

Reach out to me at admin@maxdesign.expert