How can I create a language selection drop-down block?

[Kogi013]

Hello everyone, anyone knows how to make a drop-down block for customers to choose languages? I'm using Shopify translate and adapt but can't find anywhere to do this. Or do I need to have some code?

[woobo]

Are you saying you want to add switcher?

[Kogi013]

Yes, I guess so. It's like a block drop down when a customer click in and they can choose the languages

[woobo]

Have you tried Transcy? I used this app and it super helpful for me, they have switcher feature and I can customize it to relate my brand. Their support service really active. Highly recommend it.

[Kogi013]

Thank you @woobo , I'll try it.

[richbrown_staff · Accepted solution]

Hi @Kogi013 , language and country switchers are part of your theme. Head to Online Store > Themes and Customize for your current theme. Different themes manage them in different ways, but if you are using a free Shopify theme like Dawn they can be turned on in any one of the Announcement Bar, the Header, or the Footer.

[DtotheO]

My theme didn't support language switching (it had a static liquid template with 4 languages that were not actually available in our shop). I ended up writing a bit of code to solve that, works like a charm. I use a free cdn https://github.com/lipis/flag-icons to get the flag icons, but that takes a bit of juggling because the flag names don't match the iso codes for the language. Anyway, here's a snippet.

{% if section.settings.languages and localization.available_languages.size > 1 %}
  <!-- Header Language -->
  <div class="dropdn_language">
    <div class="dropdn dropdn_language dropdn_language--noimg dropdn_caret">
      <a href="#" class="dropdn-link js-dropdn-link">
        <span class="fi fi-{% if localization.language.iso_code == "en" %}gb{% else %}{{ localization.language.iso_code }}{% endif %}"></span>
        <span class="js-dropdn-select-current">{{ localization.language.iso_code | upcase }}</span>
        <i class="icon-angle-down"></i>
      </a>
      <div class="dropdn-content">
        <ul>
          {% for lang in localization.available_languages %}
            <li>
              <a href="{{ lang.root_url }}">
                <span class="fi fi-{% if lang.iso_code == "en" %}gb{% else %}{{ lang.iso_code }}{% endif %}"></span>
                <span class="js-dropdn-select-data">{{ lang.endonym_name }}</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
  <!-- /Header Language -->
{% endif %}