Moving language selector to the header next to the cart

Store Design
1

Hi everyone,

Thanks to the bellow code (found in a similar discussion), I managed to move the language selector right under the header.

However, could someone explain me how to move it in the header, right next to the the cart on the right ?

On the picture, you can see it’s located weirdly under the header.

Capture d’écran 2022-11-04 à 16.57.19.png
Capture d’écran 2022-11-04 à 16.57.19.png1380×224 36.2 KB

I would very much like to have it next to the cart.

I use Dawn Theme 6.0.2.

My website preview link : https://wuje49c1cyjg82mn-66207744226.shopifypreview.com

Code used in header.liquid (found on this discussion: https://community.shopify.com/post/1549321)

     <noscript>
            {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">           
                <select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
                  {%- for country in localization.available_countries -%}
                    <option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
                      {{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
            {%- endform -%}
          </noscript>
          <localization-form>
            {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <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">
                    {{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
                    {% render 'icon-caret' %}
                  </button>
                  <div class="disclosure__list-wrapper" hidden>
                    <ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled">
                      {%- for country in localization.available_countries -%}
                        <li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#"{% if country.iso_code == localization.country.iso_code %} aria-current="true"{% endif %} data-value="{{ country.iso_code }}">
                            {{ country.name }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                </div>
                <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>
      

      
          <noscript>
            {%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
              <div class="localization-form__select">
          
                <select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
                  {%- for language in localization.available_languages -%}
                    <option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
                      {{ language.endonym_name | capitalize }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
              <button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
            {%- endform -%}
          </noscript>

          <localization-form>
            {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
              <div class="no-js-hidden">
                <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">
                    {{ localization.language.endonym_name | capitalize }}
                    {% render 'icon-caret' %}
                  </button>
                  <div class="disclosure__list-wrapper" hidden>
                    <ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled">
                      {%- for language in localization.available_languages -%}
                        <li class="disclosure__item" tabindex="-1">
                          <a class="link link--text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link--active{% endif %} focus-inset" href="#" hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} data-value="{{ language.iso_code }}">
                            {{ language.endonym_name | capitalize }}
                          </a>
                        </li>
                      {%- endfor -%}
                    </ul>
                  </div>
                </div>
                <input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
              </div>
            {%- endform -%}
          </localization-form>

Thanks a lot!

2

@contactdaiquiri - rather than adding localization code under the header, try by adding it to sticky header part

3

That’s actually what I’m trying to do :slightly_smiling_face: Need help on that, thanks.

4

Hi @contactdaiquiri

Try to add it next to cart icon and add this code to make it arrange correctly

.header__icons {
    align-items: center;
}
.header__icons localization-form:first-of-type {
padding-left: 10px;
}

Try it and let me know

5

Hi @ExpertRookie !

I don’t know how to put it next to the cart unfortunately…

Where exactly should I add this code please ? At the end of header.liquid ?

Thank you so much for the help.

6

Hi @contactdaiquiri
The code, that you added is wrong position, contact with us and we can help you.
then we can publish solution on here to help someone else

7

Hi @KetanKumar , any chance you know how to help on replacing the language selector correctly next to the cart ?

Allowing myself to tag you as I saw you resolve something similar.

Thank you so much in advance for the help…

Kind Regards,

Pauline

8

Hi @contactdaiquiri ,

Drop me a private message, then I can help you