How to add the currency switcher in header

Starting with theme version 2.3.0 we've added support for the multi-currency option (theme changelog here).

Shopify recommendation for all themes is to have the currency switcher inserted in the footer section but if you need to add this in the header please open the /sections/header.liquid file and insert this code in line 71 (or so, depending on the theme version you have) as in this screenshot:

{% if shop.published_locales.size > 1 or shop.enabled_currencies.size > 1 %}


  {% form 'localization', class: 'header-localization-form' %}


    {% if shop.published_locales.size > 1 %}


      <div class="currency-selector">
        <label for="languageSelector" class="hidden">{{ 'general.navigation.language_dropdown_label' | t }}</label>
        <select name="locale_code" id="languageSelector" class="language-selector__dropdown" data-language-selector>
          {%- for locale in form.available_locales -%}
            <option value="{{ locale.iso_code }}"{% if locale.iso_code == form.current_locale.iso_code %} selected="true"{% endif %}>{{ locale.iso_code | upcase }}</option>
          {% endfor %}
        </select>
        <input type="hidden" id="locale_code" name="locale_code" value="{{ form.current_locale.iso_code }}" />
      </div>


      <script type="text/javascript">
        $(document).ready(function(){
          $('#site-header #languageSelector').styledSelect({
            coverClass: 'minimal-select-cover',
            innerClass: 'minimal-select-inner'
          });
          $('#site-header #languageSelector').parent().append($.themeAssets.arrowDown);
          $('#site-header #languageSelector').parent().parent().addClass('styled');
          $('#site-header #languageSelector').on('change', function(){
            $('#site-header #locale_code').val($('#site-header #languageSelector').val());
            $('#site-header #localization_form').submit();
          })
        });
      </script>


    {% endif %}


    {% if shop.enabled_currencies.size > 1 %}


      <div class="currency-selector">
        <label for="CurrencySelector" class="hidden">{{ 'general.navigation.currency' | t }}</label>
        <select name="currency" id="CurrencySelector" class="currency-selector__dropdown" data-currency-selector>
          {% for currency in shop.enabled_currencies %}
            <option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
          {% endfor %}
        </select>
        <input type="hidden" id="currency_code" name="currency_code" value="{{ form.current_currency.iso_code }}" />
      </div>


      <script type="text/javascript">
        $(document).ready(function(){
          $('#site-header #CurrencySelector').styledSelect({
            coverClass: 'minimal-select-cover',
            innerClass: 'minimal-select-inner'
          });
          $('#site-header #CurrencySelector').parent().append($.themeAssets.arrowDown);
          $('#site-header #CurrencySelector').parent().parent().addClass('styled');
          $('#site-header #CurrencySelector').on('change', function(){
            $('#site-header #currency_code').val($('#site-header #lacurrencySelector').val());
            $('#site-header #localization_form').submit();
          })
        });
      </script>


    {% endif %}


    <style type="text/css">
      .header-localization-form {
        display: flex;
      }
    </style>


  {% endform %}


{% endif %}

Save the file. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.