Switch between two currencies

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.

Editing the HTML for currency formatting

  1. Scroll down to Standards & formats area, where you'll see your Currency setting.

  2. Click change formatting to open the Currency Formatting dialog.

  3. 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>

Uploading jquery.currencies.min.js

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

  2. Unzip the package you downloaded.

  1. On the Edit HTML/CSS page, click on the Assets folder on the left, then click Add a new asset.

  2. Click Choose File to browse to the package you just unzipped, and upload the file 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

  1. From the Edit HTML/CSS page, click on the Snippets folder to display the contents inside.

  2. Click on Add a new snippet.

  3. Name your snippet currencies, then click Create snippet.

  4. 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 }}
    // 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() {
    // 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) {
      jQuery('#currencies span[data-currency=' + shopCurrency + ']').addClass('selected');
      Currency.currentCurrency = shopCurrency;
    else {
      Currency.convertAll(shopCurrency, cookieCurrency);
      jQuery('#currencies span[data-currency=' + cookieCurrency + ']').addClass('selected');
    // When customer clicks on a currency button.
    buttons.click(function() {
      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'));
    $('body').on('ajaxCart.afterCartLoad', function(cart) {
      Currency.convertAll(shopCurrency, jQuery('#currencies span.selected').attr('data-currency'));
  5. Click Save.

Including the currencies snippet

Now you need to include the currencies snippet in your theme.

  1. From your Theme Editor, click on theme.liquid to open it.

  2. 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:

  3. Click Save.

Creating a second snippet for your toggle button

Now you need to create a second snippet to provide the toggle button.

  1. From the Edit HTML/CSS page, click on the Snippets folder to display the contents inside.

  2. Click on Add a new snippet.

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

  4. 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>
    #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;
  5. Click Save.

  6. 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>
  7. 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).

  1. From your Edit HTML/CSS page, click on theme.liquid to open it.

  2. Include the currencies-picker snippet in the header or footer area, by copy+pasting the following code:

    {% include 'currency-picker' %}
  3. Click Save.

  4. 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:

  {{ 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.

Ready to start selling with Shopify?

Try it free