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 like presented 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. 

At the end of the assets/theme.css file also add this CSS code:

.minimal-select-cover svg {
    top: 10px !important;
}
.minimal-select-cover .minimal-select-inner {
   padding-top: 7px !important;
}

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