How can I move the currency and language selector to the header?

ModelbouwMati
Visitor
1 0 0

Hi,

 

We would like to move de currency and language selector to the header. How to do please.

The best setup could be like this. And also get this in the hamburger menu for mobile.

 

 

Scherm­afbeelding 2023-01-17 om 21.59.30.png
or in the upperbar

Scherm­afbeelding 2023-01-17 om 22.22.31.png

This is the site: www.modelbouwmati.com.

thank you very much

Replies 2 (2)

Ujjaval
Shopify Partner
1242 197 208

@ModelbouwMati add below code in header.liquid file before </nav> 

 

<div class="footer__column footer__localization isolate"><noscript><form method="post" action="/en/localization" id="FooterCountryFormNoScript" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="return_to" value="/en" /><div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterCountryLabelNoScript">Country/region</h2>
                <select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript"><option value="AT">
                      Austria (EUR €)
                    </option><option value="BE" selected>
                      Belgium (EUR €)
                    </option><option value="CA">
                      Canada (CAD $)
                    </option><option value="CZ">
                      Czechia (CZK Kč)
                    </option><option value="DK">
                      Denmark (DKK kr.)
                    </option><option value="FI">
                      Finland (EUR €)
                    </option><option value="FR">
                      France (EUR €)
                    </option><option value="DE">
                      Germany (EUR €)
                    </option><option value="GR">
                      Greece (EUR €)
                    </option><option value="HU">
                      Hungary (HUF Ft)
                    </option><option value="IE">
                      Ireland (EUR €)
                    </option><option value="IT">
                      Italy (EUR €)
                    </option><option value="LU">
                      Luxembourg (EUR €)
                    </option><option value="NL">
                      Netherlands (EUR €)
                    </option><option value="NO">
                      Norway (EUR €)
                    </option><option value="PL">
                      Poland (PLN zł)
                    </option><option value="PT">
                      Portugal (EUR €)
                    </option><option value="ES">
                      Spain (EUR €)
                    </option><option value="SE">
                      Sweden (SEK kr)
                    </option><option value="CH">
                      Switzerland (CHF CHF)
                    </option><option value="US">
                      United States (USD $)
                    </option></select>
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</svg>

              </div>
              <button class="button button--tertiary">Update country/region</button></form></noscript>
          <localization-form><form method="post" action="/en/localization" id="FooterCountryForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="_method" value="put"><input type="hidden" name="return_to" value="/en"><div class="no-js-hidden">
                <h2 class="caption-large text-body" id="FooterCountryLabel">Country/region</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
                    Belgium (EUR €)
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</path></svg>

                  </button>
                  <div class="disclosure__list-wrapper" hidden="">
                    <ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled"><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="AT">
                            Austria <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large disclosure__link--active focus-inset" href="#" aria-current="true" data-value="BE">
                            Belgium <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="CA">
                            Canada <span class="localization-form__currency">(CAD $)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="CZ">
                            Czechia <span class="localization-form__currency">(CZK Kč)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="DK">
                            Denmark <span class="localization-form__currency">(DKK kr.)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="FI">
                            Finland <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="FR">
                            France <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="DE">
                            Germany <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="GR">
                            Greece <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="HU">
                            Hungary <span class="localization-form__currency">(HUF Ft)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="IE">
                            Ireland <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="IT">
                            Italy <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="LU">
                            Luxembourg <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="NL">
                            Netherlands <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="NO">
                            Norway <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="PL">
                            Poland <span class="localization-form__currency">(PLN zł)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="PT">
                            Portugal <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="ES">
                            Spain <span class="localization-form__currency">(EUR €)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="SE">
                            Sweden <span class="localization-form__currency">(SEK kr)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="CH">
                            Switzerland <span class="localization-form__currency">(CHF CHF)</span>
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" data-value="US">
                            United States <span class="localization-form__currency">(USD $)</span>
                          </a>
                        </li></ul>
                  </div>
                </div>
                <input type="hidden" name="country_code" value="BE">
              </div></form></localization-form><noscript><form method="post" action="/en/localization" id="FooterLanguageFormNoScript" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization" /><input type="hidden" name="utf8" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="return_to" value="/en" /><div class="localization-form__select">
                <h2 class="visually-hidden" id="FooterLanguageLabelNoScript">Language</h2>
                <select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript"><option value="nl" lang="nl">
                      Nederlands
                    </option><option value="en" lang="en" selected>
                      English
                    </option><option value="fr" lang="fr">
                      Français
                    </option></select>
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</svg>

              </div>
              <button class="button button--tertiary">Update language</button></form></noscript>

          <localization-form><form method="post" action="/en/localization" id="FooterLanguageForm" accept-charset="UTF-8" class="localization-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="localization"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="_method" value="put"><input type="hidden" name="return_to" value="/en"><div class="no-js-hidden">
                <h2 class="caption-large text-body" id="FooterLanguageLabel">Language</h2>
                <div class="disclosure">
                  <button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
                    English
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
</path></svg>

                  </button>
                  <div class="disclosure__list-wrapper" hidden="">
                    <ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled"><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" hreflang="nl" lang="nl" data-value="nl">
                            Nederlands
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large disclosure__link--active focus-inset" href="#" hreflang="en" lang="en" aria-current="true" data-value="en">
                            English
                          </a>
                        </li><li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large focus-inset" href="#" hreflang="fr" lang="fr" data-value="fr">
                            Français
                          </a>
                        </li></ul>
                  </div>
                </div>
                <input type="hidden" name="locale_code" value="en">
              </div></form></localization-form></div>

 

Ujjaval_0-1674028288050.png

 

 

richbrown_staff
Shopify Staff
632 91 154

Hi @ModelbouwMati , this would require custom coding. Shopify Experts might be able to help you find someone.

To learn more visit the Shopify Help Center or the Community Blog.