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

Shopify Apps
1

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.

3 Likes
2

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.

2 Likes
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_engine-specific_headers

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

4

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.

5

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

6

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.

7

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

8

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

yourJsonObject.detected_values.country_name
1 Like
9

Thanks Stephen,

I share the complete code in case it is useful for anyone else.
8 Likes
10

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?

11

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);
});
4 Likes
12

You’re a legend, thanks Stephen!!

1 Like
13

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?


country

Can you help out with this? Not sure how to call for the country name in (d) really.

14

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.

15

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.


country
16

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

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

17

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

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…


country
19

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.

20

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