Adding Language Switch in Dawn

[marcelkriegs]

Hi Community, 

i just added the app "translation lab" for my store and now i am starting to translate it in different languages. At the moment i just got one option list to choose the language, but this selection field is in the footer, so customer will not see that they can change the language when they visit for first time. The perfect solution would be an geolocation detecter so that each customer (country) gets redirected to their specific url like www.doggyhoods.com/de or www.doggyhoods.com/es and so on. But if this is not possible than just a Button / Language Switcher would be nice in the header. I checkt out a few apps, but i am not sure which one is working and which one dont. So if there is a possibility to do that, i would be more than happy for your feedback and tipps. 

cheers, 

Marcel

[Gabe]

Hey Marcel! @marcelkriegs 

Thanks for the question and you have reached the German community here in case you want to discuss this in German instead. But English is fine too!

Most cross-border-selling translation apps offer a convenient lang-switcher in the header bar and you can choose to use country flag icons to improve the language switching experience for your customers. Do you also want to allow for currency switching?

The Geolocation App is a GeoIP redirect app from Shopify and it ties in nicely with these apps to automatically detect the location of the visitor to your shop and switch the language as well as the currency (if you are using Shopify Payments multi-currency feature) accordingly (see some recommended GeoIP Redirect apps here). A lot of translation apps also have this feature built in and they also manage your domain suffixes.

Two translation apps that use the Shopify API, as far as I know, are Langify and LangShop. Perhaps their demos can give you a good idea how they work:

• Weglot - bottom right corner
• LangShop

Do you have the Shopify Markets feature activated in your shop? This feature is a one-stop-shop for all your cross-border selling needs and requirements. See more on that here.

Hope that helps!

[rocket-dev]

Hi there, great discussion here. I am also using the translate and adapt app to translate a customers website. However currently the language switchter only provides a text link to switch the languages. @Gabe you mentioned it would be possible to use language flags in the dropdown selector. Unfortunately I cannot find any option or guide on how to implement that. Would you be so kind and let me know where the documentation is or how to do that.
many thanks in advance.

[Gabe]

Hey @rocket-dev 

A language selector with country flags is definitely a much improved customer experience, you are right there! So there are a few ways to achieve this and I'll go into that here. How are you with a bit of coding?

You can build a language selector to allow customers to manually choose their preferred language. For accessibility purposes, you should create a custom component for your selector. Native select elements can make navigation difficult for screen readers, and can lead to unexpected behavior for the user.

The selector needs to be placed inside a localization form. This form can be created using the Liquid form tag and the 'localization' parameter. The selector also needs to contain an input with the attribute name="language_code", whose value will be the selected language.

{% form 'localization' %}
form_content
{% endform %}

This code generates a form for customers to select their preferred country so that they're shown the appropriate language and currency. The localization form can contain one of two selectors:

• A country selector
• A language selector

The available languages are accessible through the available_languages attribute of the localization object, and the currently selected language is accessible through the language attribute.

The localization object can be used in a localization form. To learn about how to offer localization options in your theme, refer to Support multiple currencies and languages.

Here a list of the properties and their links to our resources:

• localization-available_countries
• available_countries
• array of country
• localization-available_languages
• available_languages
• array of shop_locale
• localization-country
• country
• country
• localization-language
• language
• shop_locale
• localization-market
• market
• market

Note: You should only output a country selector if there's more than one available language.

The following example includes a 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 %}

For an example of JavaScript that manages the visibility of the option list and submits the form on selection, refer to JavaScript submission of the localization form.

To implement a language selector with country flags in the Shopify storefront, you can follow the steps you provided with slight modifications. Here's a step-by-step process:

1. Gather Country Flags:

   • First, you'll need a set of country flag images. You can find various free sources online that offer SVG or PNG flags by country or language code.
   • Make sure to host these images in a place that can be accessed from your Shopify store, such as within your theme assets.

2. Modify the Liquid Template:

   • Update the existing code you provided to display flags next to the language name.

     Here's a modification of the example code above:

{% 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">
          <img src="{{ 'path_to_flags_folder/' | append: localization.language.iso_code | append: '.png' }}" alt="{{ localization.language.endonym_name | capitalize }}" />
          {{ localization.language.endonym_name | capitalize }}

          <!-- SVG for dropdown icon -->
          ...
        </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 }}">
                <img src="{{ 'path_to_flags_folder/' | append: language.iso_code | append: '.png' }}" alt="{{ language.endonym_name | capitalize }}" />
                {{ language.endonym_name | capitalize }}
              </a>
            </li>
          {% endfor %}
        </ul>

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

Replace path_to_flags_folder/ with the correct path to your flag assets. If you're using SVGs, change .png to .svg.

3. Update the JavaScript:

   • If you're using the Shopify provided JavaScript for managing the visibility of the option list and submitting the form on selection, ensure that this script is included and working correctly.

4. Style and Accessibility:

   • Ensure that the flags are visible and appropriately sized.
   • Make sure to use the alt attribute for the flag images to provide a textual description of the image. This is vital for screen readers and overall accessibility.

5. Test:

   • Make sure to test the language selector on various devices and browsers to ensure it works as expected. Testing with a screen reader is also essential to ensure that your website remains accessible to all users.

With these steps and modifications, you'll be able to add country flags to your Shopify language selector, providing a visual cue for your users.

[rocket-dev]

hi @Gabe,

wow many thanks for this detailed answer. 
I think I more or less understand the code for the language switcher. However I am not really sure how to implement this in my current dawn theme.

If I understand it correctly dawn theme uses localization-form.js to create the localization form.

And the javascript then renders the language-localization.liquid file.

So how would I exchange the current form with the solution you provided ?

Many thanks in advance

Andreas

[Gabe]

Hey @rocket-dev 

Just curious, are you a Shopify Partner as your avatar states? But a great bunch of questions and let us dive into that here! 😉

To implement the provided solution into the Dawn theme (or any other Shopify theme), you can essentially follow the steps below:

1. Prepare your assets:

   • Gather the necessary country flag images as mentioned in the above provided steps.
   • Upload these images to your Shopify theme assets. Go to Shopify Admin > Online Store > Themes > [Your Theme] > Edit Code and then, under Assets, upload your flag images.

2. Modify the localization form:

   • Within the Shopify code editor (Shopify Admin > Online Store > Themes > [Your Theme] > Edit Code), locate the language-localization.liquid file.
   • Replace the existing code in this file with the modified Liquid template provided above.
   • Ensure to update the path_to_flags_folder/ placeholder in the provided code with the correct path to your flag assets on Shopify. For assets uploaded directly to your theme, it will look something like this: {{ 'asset_url' | asset_url }}. So, for an SVG, it would be {{ 'flagname.svg' | asset_url }} where "flagname" is the name of the flag file you uploaded.

3. Update JavaScript (if necessary):

   • If the Dawn theme doesn't already handle the display toggling for the localization form, you might need to add custom JavaScript to manage the visibility of the language options and to submit the form upon a language being selected.
   • Look for any JS files related to localization or, alternatively, add your own JavaScript logic. This could be in a file like theme.js or a similar main JS file.

4. Styling:

   • Add any necessary styling to ensure that the flags and language names are displayed properly. You can do this by updating the theme's CSS files or using the new CSS editor.
   • Ensure the flags aren't too big or small, and ensure they align well with the language names.

5. Test:

   • As with any changes, especially those involving UI and functionality, thorough testing is crucial.
   • Check the language selector on different devices (desktop, tablet, mobile) and in various browsers (Chrome, Firefox, Safari, Edge).
   • If possible, test with a screen reader to ensure accessibility.

6. Consider using a theme customizer:

   • If you're comfortable with Liquid and JavaScript, you might consider adding a section in the Dawn theme's customizer to toggle the display of flags on or off, allowing for easier management in the future without diving into the code.

Remember, it's always a good idea to make a backup of your theme before making significant changes. This way, if something doesn't work as expected, you can revert to the previous version without any hassle.

Hope that helps! 😉

[rocket-dev]

Hi @Gabe, many thanks for your reply. Yes in deed I am a shopify partner. I didn't even know that you can change that in the avatar. When registering shopify community automatically set the partner status.
I'll try to implement your solution and feedback about the solution.
Hear you soon.