Switch between multiple currencies

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

Ready to start selling with Shopify?

Try it free