Solved

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

Kogi013
Tourist
6 0 1

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?

Accepted Solution (1)

richbrown_staff
Shopify Staff
625 90 153

This is an 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.

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

View solution in original post

Replies 6 (6)

woobo
Tourist
3 0 1

Are you saying you want to add switcher?

 

Kogi013
Tourist
6 0 1

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

 

woobo
Tourist
3 0 1

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
Tourist
6 0 1

Thank you @woobo , I'll try it.

richbrown_staff
Shopify Staff
625 90 153

This is an 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.

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

DtotheO
Visitor
1 0 0

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 %}