Shopify Multi-Currency Converter

These steps are required to add multi-currency changer to your Shopify website.

Please note, a lot of this post is copied from Shopify documentation and Caroline Schnapp… with some modifications to add message to cart page and footer so that customers know what is the difference between current displayed price and actual charges in store currency. This is in use on FEIT website.

1. Tell us where the money is

Go to Preferences – General Settings.

Scroll down to the Adjust your standards and formats section.

Click on the formatting link next to ‘Money’.

Wrap your “html with currency format” in a span element with a class name set to money.

Here’s what you’ll get if your shop currency is United States Dollars (USD):

<span class='money'>${{amount}} USD</span>

Do the same with the “html without currency format”.

<span class='money'>${{amount}}</span>

Use single quotes. That will save you from some anguish down the line if your theme uses options.

If you are using Shopify 2 (currently in beta), to edit your money formats, you will need to go to Store Configuration → Settings → Standards Formats → Currency → ‘change formatting’.

2. Add multi currency jquery by carolineschnapp

Download https://github.com/carolineschnapp/currencies/blob/master/jquery.currencies.min.js

Save it to your theme “assets” folder.

3. Create theme settings

Add this code to your ‘config/settings.html’ file:

<fieldset>
  <legend>Money options</legend>
  <table>
    <tr>
      <td><label for="show_multiple_currencies">Allow shopper to see prices in his own currency?</label></td>
      <td><input type="checkbox" id="show_multiple_currencies" name="show_multiple_currencies" /></td>
    </tr>
    <tr>
      <td colspan="2"><small>Although you will be able to display prices on your store front in different currencies, Shopify will still process orders in your shop's currency.</small></td>
    </tr>
    <tr>
      <td><label for="currency_format">Money format</label></td>
      <td>
        <select name="currency_format" id="currency_format">
          <option value="money_format" selected="selected">
            Without Currency, ex: $10.00
          </option>
          <option value="money_with_currency_format">
            With Currency, ex: $10 CAD
          </option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="supported_currencies">Currencies you wish to support</label></td>
      <td><input type="text long" class="text" name="supported_currencies" id="supported_currencies" value="CAD USD" /></td>
    </tr>
    <tr>
      <td colspan="2"><small>Separate your currency codes with a space. Use the ISO 4217 3-letter currency code. Click <a target="_blank" href="http://www.xe.com/iso4217.php">here</a> for a complete list of currency codes. Example: <i>CAD USD</i>.</small></td>
    </tr>
    <tr>
      <td colspan="2"><small>* For this functionality to work in your shop, you are required to edit your money formats as per <a href="http://wiki.shopify.com/How_to_Show_Multiple_Currencies#Do_tell_where_the_money_is" target="_blank">these instructions</a> (“Do tell where the money is”).</small></td>
    </tr>
  </table>
</fieldset>

Then set up defaults in your ‘config/settings_data.json’ file:

{
  "current": {
    ....
    "show_multiple_currencies": true,
    "currency_format": "money_format",
    "supported_currencies": "AUD USD GBP EUR JPY",
    ....
  },
....

Then log into admin to set up your values:

4. Create a new snippet for the selector html and css

Save a new snippet at ‘snippets/new-currencies-picker.liquid’ with this code:

<span id="currencies">
  <span data-currency="AUD" class="{% if shop.currency == 'AUD' %}selected {% endif %}left">AUD</span> | 
  <span data-currency="EUR" class="{% if shop.currency == 'EUR' %}selected {% endif %}middle">EUR</span> | 
  <span data-currency="GBP" class="{% if shop.currency == 'GBP' %}selected {% endif %}middle">GBP</span> | 
  <span data-currency="USD" class="{% if shop.currency == 'USD' %}selected {% endif %}middle">USD</span> | 
  <span data-currency="JPY" class="{% if shop.currency == 'JPY' %}selected {% endif %}right">JPY</span>
</span>
<style>
#currencies .selected { text-decoration:underline; color:{{ settings.global_hover_color }};}
</style>

Add this snippet in the body of your theme layout file.

{% include 'new-currency-picker' %}

5. Create a new snippet for the jquery for the changer

Save a new snippet at ‘snippets/new-currencies.liquid’ with this code:

{{ "/services/javascripts/currencies.js" | script_tag }}
{{ "jquery.currencies.min.js" | asset_url | script_tag }}

<script>

// Pick your format here:  
// Can be 'money_format' or 'money_with_currency_format'
Currency.format = 'money_format';
var shopCurrency = '{{ shop.currency }}';
var cookieCurrency = Currency.cookie.read();

// Fix for customer account pages 
jQuery('span.money span.money').each(function() {
	jQuery(this).parent('span.money').removeClass('money');
});

// Add precalculated shop currency to data attribute 
jQuery('span.money').each(function() {
	jQuery(this).attr('data-currency-{{ shop.currency }}', jQuery(this).html());
});

// Select all your currencies buttons.
var buttons = jQuery('#currencies span');

// When the page loads.
if (cookieCurrency == null || cookieCurrency == shopCurrency) {
	Currency.currentCurrency = shopCurrency;
}
else {
	Currency.currentCurrency = cookieCurrency;
	Currency.convertAll(shopCurrency, cookieCurrency);
	buttons.removeClass('selected');
	jQuery('#currencies span[data-currency=' + cookieCurrency + ']').addClass('selected');
	do_multi_currency_warning(Currency.currentCurrency, shopCurrency);
}

// When customer clicks on a currency button.
buttons.click(function() {
	buttons.removeClass('selected');
	jQuery(this).addClass('selected');
	var newCurrency =  jQuery(this).attr('data-currency');
	Currency.convertAll(Currency.currentCurrency, newCurrency);
	do_multi_currency_warning(Currency.currentCurrency, shopCurrency);
});

// For product options.
var original_selectCallback = window.selectCallback;
var selectCallback = function(variant, selector) {
	original_selectCallback(variant, selector);
	Currency.convertAll(shopCurrency, jQuery('#currencies span.selected').attr('data-currency'));
	do_multi_currency_warning(Currency.currentCurrency, shopCurrency);
};

// do this each time you recalculate or page load
do_multi_currency_warning(Currency.currentCurrency, shopCurrency);


// a function to make the cart better when choosing different currencies
// explained in step 7 below
function do_multi_currency_warning(currentCurrency, shopCurrency)
{
	jQuery('.selected-currency').text(Currency.currentCurrency);
	if (currentCurrency != shopCurrency)
	{
		jQuery('.multi-currency-warning').text('*');
		jQuery('.multi-currency-warning-bottom').show();
	}
	else
	{
		jQuery('.multi-currency-warning').text('');
		jQuery('.multi-currency-warning-bottom').hide();
	}
}
</script>

Add this snippet to the bottom of your theme layout file after your ‘shop.js’ include.

{% include 'new-currency' %}

6. Update your product variants changer

In product.liquid so that currency conversion is applied when you change product options.

var selectCallback = function(variant, selector) {
....
{% if settings.show_multiple_currencies %}
	Currency.convertAll('{{ shop.currency }}', jQuery('#currencies span.selected').attr('data-currency'), 'span.money', 'money_format');
	do_multi_currency_warning(Currency.currentCurrency, '{{ shop.currency }}');
{% endif %}
....
};

7. Add a message to your footer and cart

You can use the following code to output the current selected currency (see function ‘do_multi_currency_warning’ above):

<span class="selected-currency"></span>

So you can add this message to your website footer or anywhere in body text:

Prices are in <span class="selected-currency"></span>

And to avoid confusion on the shopping cart page, add a message that tells the user that the final checkout will be in your original store currency:

<p class="multi-currency-warning-bottom">* Prices are currently displayed in <span class="selected-currency"></span>. You will checkout using {{ shop.currency }} at the most current exchange rate.</p>

That’s a wrap.

References/Thanks to: