(Shopify) Automatically change a shop's currency based on the customer's geolocation

shopify-auto-currencies-switcher.js

// Dependencies
// - https://github.com/carolineschnapp/currencies

// Don't change currency if Cookie has been already set
if (Currency.cookie.read() == null) {

jQuery.ajax( {
  url: '//freegeoip.net/json/',
  type: 'GET',
  dataType: 'jsonp',
  success: function(location) {
    if (location.country_code == 'TH') { // Default shop currency
      $('[name=currencies][value=THB]').attr('checked', 'checked');
    } else if (location.country_code == 'JP') { // Secondary currency
      $('[name=currencies][value=JPY]').attr('checked', 'checked');
    } else { // Fallback currency
      $('[name=currencies][value=USD]').attr('checked', 'checked');
    }
    // Let the scripts in 'currencies.liquid' handle the rest
    $('[name=currencies]').change();
  }
} );

}

// Based upon code by Ben Klinger (www.studiove.com)
// Source: https://ecommerce.shopify.com/c/shopify-discussion/t/auto-change-currency-based-on-location-tutorial-179134

@usmanbinliaqat thanks for the update! Unfortunately it doesn't seem to work. Got something working but with redirect.

`

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ipgeolocation.min.js"></script> <script> getGeolocation(handleIPGeolocationResponse, 'API-KEY'); function handleIPGeolocationResponse(location) { console.log(location.currency.code); // Let the scripts in 'currencies.liquid' handle the rest jQuery('button[value="'+location.currency.code+'"]:not([aria-current])').click(); //setCookie('hidebar', 'hide'); } function setCookie(key, value) { var expires = new Date(); expires.setTime(expires.getTime() + 604800); document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/'; } </script>

`

Would like your script to work without redirect. I tried changing the top part to currencies:

<script> var allowedCurrencies = ['AUD', 'CAD', 'GBP', 'SEK', 'CHF', 'TTD', 'USD', 'EUR']; var defaultCurrency = 'GBP'; Still not working.

Solved it with a little configuration and without API keys.
Check my script below.

https://gist.github.com/Drewberrysteph/e7f44d23d714617134ad7250d9149b06

@kwibis The above script doesn't redirect the user. It updates the currency if the visitor is from the allowed countries, else set to the default currency i.e., 'GBP'.

Here is the updated script using ipgeolocation.io API as suggested by @Drewberrysteph.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ipgeolocation.min.js"></script>
<script>
  function setCookie(key, value, expiry) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
  }

  function setLocalCurrency(response) {

    if (response) {
      setCookie('cart_currency', response.currency.code, '1');
    }
  }

  _ipgeolocation.makeAsyncCallsToAPI(false);
  _ipgeolocation.enableSessionStorage(true);
  _ipgeolocation.setFields("currency");
  _ipgeolocation.getGeolocation(setLocalCurrency, "YOUR_API_KEY");
</script>

@kwibis The above script doesn't redirect the user. It updates the currency if the visitor is from the allowed countries, else set to the default currency i.e., 'GBP'.

Here is the updated script using ipgeolocation.io API as suggested by @Drewberrysteph.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ipgeolocation.min.js"></script>
<script>
  function setCookie(key, value, expiry) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
  }

  function setLocalCurrency(response) {

    if (response) {
      setCookie('cart_currency', response.currency.code, '1');
    }
  }

  _ipgeolocation.makeAsyncCallsToAPI(false);
  _ipgeolocation.enableSessionStorage(true);
  _ipgeolocation.setFields("currency");
  _ipgeolocation.getGeolocation(setLocalCurrency, "YOUR_API_KEY");
</script>

Can it be somehow modified for location based content. I am trying this but not getting what i want

@usmanbinliaqat thanks a lot! this seems to be working. One problem, it only works after the first page view. Any chance this can be fixed? Or does that mean, page reload?

@kwibis The above script doesn't redirect the user. It updates the currency if the visitor is from the allowed countries, else set to the default currency i.e., 'GBP'.

Here is the updated script using ipgeolocation.io API as suggested by @Drewberrysteph.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/ipgeolocation.min.js"></script>
<script>
  function setCookie(key, value, expiry) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/';
  }

  function setLocalCurrency(response) {

    if (response) {
      setCookie('cart_currency', response.currency.code, '1');
    }
  }

  _ipgeolocation.makeAsyncCallsToAPI(false);
  _ipgeolocation.enableSessionStorage(true);
  _ipgeolocation.setFields("currency");
  _ipgeolocation.getGeolocation(setLocalCurrency, "YOUR_API_KEY");
</script>

Thanks for that. Seems though that it only works second time. The first time you go to a link it will not change currency. If you refresh, then it will. Is there any way to fix this? Thanks!

@leeban17 your code has been working great! Any idea on how to work with the new currency selector from shopify?

@leeban17 your code has been working great! Any idea on how to work with the new currency selector from Shopify?

I built a free auto currency and location app that works with the new currency & region selector of Shopify themes. It's inspired by discussions here with all code optimized for performance.