Add A Multiple Currency Selector To Your Shopify Store Using Code Tutorial

Offering customers multiple currency options

After you enable selling in multiple currencies with Shopify Payments, your customers can browse your store and check out in their preferred currency. You can set the currency customers see in your store in different places:

• A currency selector – If you want your customers to choose their local currency, then your theme needs a currency selector.
• A link – You can send your customers a link that opens your store in a specific currency.
• Your store – When a customer visits your store, your store chooses the currency to display based on the geolocation of your customer. Geolocation is available on the Shopify Plus plan only.

How to Add A Multiple Currency Selector to Your Shopify Store

Follow this step-by-step guide to add a multiple currency selector to your Shopify store on your own: 

1. From your Shopify admin, go to Online Store > Themes.
2. Beside the name of the theme that you want to edit, click Actions > Edit code.
3. If you’re using the Debut theme, then click header.liquid in the Sections directory. If you’re using a third-party theme that doesn’t have a header.liquid file, then click theme.liquid instead.
4. Find the <header> section in the file, and then add the currency selector code in a place that doesn’t compete with the cart icon. We added 3 different currency switchers, so choose whichever works best for you

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.

1. 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.
2. Click Save.

Your currency selector should now appear in your store.

Creating a multiple currency selector has never been easier and Ecomvitals has got you covered every step of the way. This way, you can increase your sales by making sure your customers have a convenient payment currency skipping the extra bank fees and conversion calculations.

Be sure to leave us a comment below to let us know if this tutorial works for you and any other tutorials you’d like to see.