Language selector location

Store Design
, ,
1

Hi i’d like to add language selector as well as country selector to my mobile header somewhere here: My theme does not have this function. Any help on how to do that? Thanks.

image
image710×1200 75 KB

2

Step 1: Check Shopify Settings

  1. Language Selector

    • Go to Online Store > Themes > Customize.

    • Check Header section settings. Some themes have a “Show language selector” toggle.

    • If your theme doesn’t support it, we’ll need to add it manually.

  2. Country Selector (for currency)

    • Go to Settings > Payments > Manage (Shopify Payments).

    • Enable multiple currencies if not done.

    • Some themes allow showing a currency selector in the header; otherwise, we’ll add it manually too.

Step 2: Add via Shopify Apps (Quick Option)

If coding is tricky, Shopify has apps that add language + country/currency selectors that work on mobile, such as:

  • Langify or Weglot (for languages)

  • Auto Currency Switcher or Currency Converter Plus (for country/currency)

Apps usually give you a snippet or script you can drop in your theme header.

And if any do not work, then you’ll need custom coding, let me know what you works and then you’ll know the next step to take.

3

Hi @JustinasR

You can insert them in your header-mobile.liquid (or wherever your mobile header markup lives). For example:

<div class="mobile-selectors">

  <!-- Country selector -->
  <form method="post" action="{{ routes.localization_url }}">
    <input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
    <select name="country_code" onchange="this.form.submit()">
      {% 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 }})
        </option>
      {% endfor %}
    </select>
  </form>

  <!-- Language selector -->
  <form method="post" action="{{ routes.localization_url }}">
    <input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
    <select name="locale_code" onchange="this.form.submit()">
      {% for language in localization.available_languages %}
        <option value="{{ language.iso_code }}"
          {% if language.iso_code == localization.language.iso_code %}selected{% endif %}>
          {{ language.endonym_name }}
        </option>
      {% endfor %}
    </select>
  </form>

</div>

If you need my help with the setup, feel free to message me.

4

Hello @JustinasR ,

I hope you are doing well!

I recoomend you to use the below apps for the languages:
1.) Langify
2.) Langshop

There are also various apps available but I recommend you to take the demo with them before purchasing the app. This will helps you understand functionality and capablity of the app.

6

Hi, took a while to get back to this task. I inserted your code at the bottom of header.menu.drop.liquid

Several issues:

  1. The selector also appears in desktop version, i only want it in mobile.

  2. The actual selection does not work. For e.g. if i select language Lithuanian the link takes you to 404 page does not exist.

Here is the preview link: https://8hfhl2huby4a0su2-77830390093.shopifypreview.com

Would appreciate your support!

7

Hi @JustinasR

Could you please send me a collaborator access code so that I can fix this directly in your store?

Best regards,
Devcoder :laptop: