Switch between two currencies

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.
Caution
This document has not been verified to work with sectioned themes. We are currently reviewing our documentation and will update them soon. You can try to implement this on your theme, but keep in mind that it may not function.
Note
Add a button that toggles between two currencies on your storefront.
Tip
The solution presented here won't work in the following themes: Venture and Boundless.
In this tutorial, you'll add a CSS3-styled button that will act as a toggle switch between two different units of currency on your storefront.

Clicking the button will enable your visitors to view all displayed monetary amounts (apart from those on the checkout page) in either currency. The currency selection is stored in a web cookie, so your customer's last choice of currency is remembered.
You can preview the results of this customization here.

In this article

Editing the HTML for currency formatting

    From your Shopify admin, go to Settings.

    Scroll down to Standards & formats area, where you'll see your Currency setting.
    Click change formatting to open the Currency Formatting dialog.
    Find the HTML with currency and the HTML without currency elements in the dialog. You need to wrap each of these in a span element whose class name is set to money.
As an example, paste this code if your shop currency is United States Dollars (USD):
<span class=money>${{amount}} USD</span>
Caution
Do not add quotes around the word money. Adding quotes will break the code.
Caution
You might notice that the original HTML without currency field does not include a currency descriptor. For this tutorial, it's important that you do add the descriptor, to avoid any confusion between currencies later. In the end, the first two money formats should be exactly the same, both containing the currency descriptor, like so:

Uploading jquery.currencies.min.js

    Go to this GitHub page and download the carolineschnapp-currencies.zip package.

    Unzip the package you downloaded.
    From your Shopify admin, go to Online Store > Themes.

    Find the theme you want to edit, and then click Actions > Edit code. 
    On the Edit HTML/CSS page, click on the Assets folder on the left, then click Add a new asset.
    Click Choose File to browse to the package you just unzipped, and upload the file jquery.currencies.min.js.

jquery.currencies.min.js

The file jquery.currencies.min.js expands the currencies.js library provided by Shopify and has to be used in conjunction with it. Don't worry about including currencies.js though. The next step will accomplish that — and more — automatically.
While currencies.js converts a money amount from one currency to another, jquery.currencies.min.js provides a function that converts all money amounts on a web page and displays a formatted result, with currency symbol and descriptor. You can read more here.

Creating a currencies snippet

    From the Edit HTML/CSS page, click on the Snippets folder to display the contents inside.
    Click on Add a new snippet.

    Name your snippet currencies, then click Create snippet.

    When your new snippet opens, copy+paste the following code into the Edit HTML/CSS page:
    {{ "//cdn.shopify.com/s/javascripts/currencies.js" | script_tag }} {{ "jquery.currencies.min.js" | asset_url | script_tag }} <script> // Pick your format here: // money_format or money_with_currency_format Currency.format = 'money_with_currency_format'; var shopCurrency = '{{ shop.currency }}'; /* Sometimes merchants change their shop currency, let's tell our JavaScript file */ Currency.moneyFormats[shopCurrency].money_with_currency_format = {{ shop.money_with_currency_format | strip_html | json }}; Currency.moneyFormats[shopCurrency].money_format = {{ shop.money_format | strip_html | json }}; var cookieCurrency = Currency.cookie.read(); // Fix for customer account pages. jQuery('span.money span.money').each(function() { jQuery(this).parents('span.money').removeClass('money'); }); // Saving the current price. 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'); // If there's no cookie or it's the shop currency. if (cookieCurrency == null || cookieCurrency === shopCurrency) { buttons.removeClass('selected'); jQuery('#currencies span[data-currency=' + shopCurrency + ']').addClass('selected'); Currency.currentCurrency = shopCurrency; } else { Currency.convertAll(shopCurrency, cookieCurrency); buttons.removeClass('selected'); jQuery('#currencies span[data-currency=' + cookieCurrency + ']').addClass('selected'); } // 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); }); // For 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')); jQuery('.selected-currency').text(Currency.currentCurrency); }; $('body').on('ajaxCart.afterCartLoad', function(cart) { Currency.convertAll(shopCurrency, jQuery('#currencies span.selected').attr('data-currency')); jQuery('.selected-currency').text(Currency.currentCurrency); }); jQuery('.selected-currency').text(Currency.currentCurrency); </script>
    Click Save.

Including the currencies snippet

Now you need to include the currencies snippet in your theme.
    From your Theme Editor, click on theme.liquid to open it.
    Locate the closing body tag at the end of theme.liquid, and copy+paste the following code just before it.
    {% include 'currencies' %}
    The bottom of your amended theme.liquid file should now look like this:

    Click Save.

Creating a second snippet for your toggle button

Now you need to create a second snippet to provide the toggle button.
    From the Edit HTML/CSS page, click on the Snippets folder to display the contents inside.
    Click on Add a new snippet.

    Name your snippet currency-picker, then click Create snippet.

    When your new snippet opens, copy+paste the following code into the Edit HTML/CSS page:
    <span id="currencies"> <span data-currency="EUR" class="left">&euro;</span> <span data-currency="GBP" class="right">&pound;</span> </span> <style> #currencies { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; color: #bbbbbb; font-size: 0; /* to eliminate space between buttons */ line-height: 1.5; cursor: pointer; } #currencies span { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; padding: 5px 10px; border: 1px solid #D6D6D6; background: none #F6F6F6; font-size: 13px; } #currencies .left { -webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-bottomleft: 7px; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } #currencies .right { -webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-left: none; } #currencies .selected { font-weight: normal; color: #666666; background: none #eeeeee; } </style>
    Click Save.
    If you need to, edit these two lines to use your preferred currencies:
    <span id="currencies"> <span data-currency="EUR" class="left">&euro;</span> <span data-currency="GBP" class="right">&pound;</span> </span>
    Click Save again if necessary.

Including the toggle button snippet

Now you need to decide where you want to see your toggle button. You probably want it to be displayed on every page, which means you must add it to the file theme.liquid (although you can add it just to certain pages if you prefer).
    From your Edit HTML/CSS page, click on theme.liquid to open it.
    Include the currencies-picker snippet in the header or footer area, by copy+pasting the following code:
    {% include 'currency-picker' %}
    Click Save.
    You'll need to use CSS to position your button correctly on the page.

Explaining checkout behavior to customers

Checkout transaction amounts can only ever be shown in the operating currency of your store, which you specified in the Standards & formats section of your Settings page.
When your customers reach checkout, your shop reverts back to its trading currency without explanation. You can, however, edit your cart.liquid template to explain what will happen. You could also add an explanation to the checkout pages using a custom checkout translation (where you only translate what you want).
For example, you could use this in cart.liquid next to the checkout button:
<p> {{ shop.name }} process all orders in {{ shop.currency }}. While the content of your cart is currently displayed in <span class="selected-currency"></span>, you will checkout using {{ shop.currency }} at the most current exchange rate. </p>