Language selector allow customers to manually choose their preferred language.

Code below adds button and a popover containing each language option:

{% if localization.available_languages.size > 1 %}
  <localization-form>
    {% form 'localization' %}
      <div class="disclosure">
        <button type="button" class="disclosure__button" aria-expanded="false" aria-controls="LanguageList">
          {{ localization.language.endonym_name | capitalize }}

          <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>
        </button>

        <ul id="LanguageList" role="list" class="disclosure__list" hidden>
          {% for language in localization.available_languages %}
            <li class="disclosure__item" tabindex="-1">
              <a href="#"{% if language.iso_code == localization.language.iso_code %} aria-current="true"{% endif %} hreflang="{{ language.iso_code }}" lang="{{ language.iso_code }}" data-value="{{ language.iso_code }}">
                {{ language.endonym_name | capitalize }}
              </a>
            </li>
          {% endfor %}
        </ul>

        <input type="hidden" name="language_code" value="{{ localization.language.iso_code }}">
      </div>
    {% endform %}
  </localization-form>
{% endif %}