Get a customer's location using JavaScript

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Shopify does not expose your customer's current location or IP address in Liquid. You can only get that information with JavaScript.

Use the Geolocation API

You can use the JavaScript API called Geolocation to get the location of a visitor in latitude and longitude, but there are two limitations to this approach:

The browser will ask your visitor to approve that their current location be shared with your store. This may scare your visitors or annoy them. Here's how your browser will ask for your location information: http://html5demos.com/geo. That'll give you an idea.

Note

If latitude and longitude numbers are hard to read, you can translate them to country or city locations using Google's API.

Use a free web service

There's an easier and free approach that won't ask your visitor for any permission.

It consists in submitting a very simple Ajax POST request to http://freegeoip.net/json. Once you receive your location information, in JSON, you react accordingly by updating the page or redirecting to a new one.

Here is how you submit your request for location information:

jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'POST',
  dataType: 'jsonp',
  success: function(location) {
    // example where I update content on the page.
    jQuery('#city').html(location.city);
    jQuery('#region-code').html(location.region_code);
    jQuery('#region-name').html(location.region_name);
    jQuery('#areacode').html(location.areacode);
    jQuery('#ip').html(location.ip);
    jQuery('#zipcode').html(location.zipcode);
    jQuery('#longitude').html(location.longitude);
    jQuery('#latitude').html(location.latitude);
    jQuery('#country-name').html(location.country_name);
    jQuery('#country-code').html(location.country_code);
  }
} );

Country codes are in ISO format. Learn more about ISO formatting.

Using the above code, you can achieve a function similar to the one demonstrated here: http://the-new-standard-theme.myshopify.com/pages/country-location

Redirect to another store

If you have a special store for your Canadian customers, you can redirect to it from your American store using the following code:

jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'POST',
  dataType: 'jsonp',
  success: function(location) {
    // If the visitor is browsing from Canada.
    if (location.country_code === 'CA') {
      // Redirect him to the Canadian store.
      window.top.location.href = 'http://shop-in-canada.myshopify.com';
    }
  }
} );

Trigger a popup when on the wrong website

Alternatively, you may recommend to your visitors that they jump over to your Canadian website using a popup:

<script>
jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'POST',
  dataType: 'jsonp',
  success: function(location) {
    // If the visitor is browsing from Canada.
    if (location.country_code === 'CA') {
      // Tell him about the Canadian store.
      jQuery.fancybox.open(jQuery('#message'));
    }
  }
} );
</script>
<div style="display:none;">
  <div id="message" style="padding:30px;">
    <h1>Hello!</h1>
    <p>You are in Canada, and we have a Canadian website <a href="http://shop-in-canada.myshopify.com">here</a>.</p>
  </div>
</div>

That code uses a mix of HTML and JavaScript, and so needs to be added to your theme.liquid file. It also assumes that your Shopify theme uses the Fancybox plugin.

Want to discuss this page?

Visit the Shopify Community