Get a visitor's location 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';
    }
  }
} );

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.liquidfile. It also assumes that your Shopify theme uses the Fancybox plugin.

Knowledge Base