Add A Multiple Currency Selector to Your Shopify Store

• • 1.The following example creates a currency selector that sorts and displays the currencies by their ISO code and currency symbol:

{% form ‘currency’ %}

    {{ form | currency_selector }}

            <button type=”submit”>Update</button>

         {% endform %}

2.The following example also creates a currency selector that sorts and displays the currencies by their ISO code and currency symbol. This example uses JavaScript to trigger the currency change rather than a button:

  {% form ‘currency’ %}
   {{ form | currency_selector }}
  {% endform %}

3.The following example contains a customized currency selector:

  {% form ‘currency’ %}
    <select name=”currency”>
      {% for currency in shop.enabled_currencies %}
        {% if currency == cart.currency %}
              <option selected=”true”>{{currency.iso_code}} {{currency.symbol}}</option>
          {% else %}
              <option>{{currency.iso_code}}</option>
        {% endif %}
      {% endfor %}
    </select>
  {% endform %}

To make the currency change occur when a selection is made from the dropdown, you need to add the following JavaScript code to the bottom of your theme.js:

  function currencyFormSubmit(event) {
    event.target.form.submit();
  }

  document.querySelectorAll(‘.shopify-currency-form select’).forEach(function(element) {
    element.addEventListener(‘change’, currencyFormSubmit);
  });

 Note

Some themes might require you to wrap the {% form ‘currency’ %} tag in an HTML element. For example, in Shopify’s Pop theme, you need to use a <li> element.

• • Optional: If your theme has separate styling for the mobile drawer, then you might want to add separate CSS classes so that the currency selector matches the design on mobile.

• • Click Save.