Add A Multiple Currency Selector to Your Shopify Store

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: 

     

      • From your Shopify admin, go to Online Store > Themes.

      • Beside the name of the theme that you want to edit, click Actions > Edit code.

      • If you’re using the Debut theme,  click header.liquid in the Sections directory.

      •  If you’re using a third-party theme that doesn’t have a header.liquid file,  click theme.liquid                  instead.

    • 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 choo  se                    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.

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

    Leave A Comment

    0

    At vero eos et accusamus et iusto odio digni goikussimos ducimus qui to bonfo blanditiis praese. Ntium voluum deleniti atque.

    Melbourne, Australia
    (Sat - Thursday)
    (10am - 05 pm)
    Melbourne, Australia
    (Sat - Thursday)
    (10am - 05 pm)

    No products in the cart.

    X
    ×

    Hello!

    Click one of our contacts below to chat on WhatsApp

    × How can I help you?