Switch between multiple currencies


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.


Add a button that toggles between three or four currencies on your storefront.

Did you know?

The solution presented here won't work in the following themes: Venture and Boundless.

Before attempting this tutorial, you should complete the simpler version, which creates a button that toggles between two currencies. This tutorial builds on the work done there.

When you've created your currencies-picker snippet, you need to make the following additions:

  • Define an additional CSS class:
#currencies .middle  {
    border-left: none;
  • Add your 3rd and 4th currencies:
<span id="currencies">
  <span data-currency="EUR" class="{% if shop.currency == 'EUR' %}selected {% endif %}left">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="CAD" class="{% if shop.currency == 'CAD' %}selected {% endif %}right">CAD</span>

Anything that's not on the far left or on the far right must have a class set to middle. Instead of the three-letter currency codes, you can use images or the currency symbols as content of the span elements. Only the data-currency attribute values matter here. The content of the span elements can be anything.

Want to discuss this page?

Visit the Shopify Community