One Button for Language and Currency Selection

One Button for Language and Currency Selection

Raimer
Tourist
5 0 0

Hi Shopify Team,

I need help with setting up a single button to switch both language and currency in my theme.

Current Setup:

At the top of my store, I currently have two separate buttons:

  • Language selector: LT and NL
  • Currency selector: LT EUR and NL EUR

Issue:

  • If I hide one of the buttons (e.g., only show the language selector), products available for the NL market do not display correctly.
  • When both buttons are visible and set correctly (NL → NL EUR, LT → LT EUR), everything works fine, and the correct products show up per market.

Question:

How can I create one button (NL / LT) that automatically switches both language and currency together so that:

  • NL → NL EUR
  • LT → LT EUR

I want to ensure that the correct products are displayed per market while simplifying the selection process for customers.

Looking forward to your advice!

Best regards,

Replies 5 (5)

lynth
Shopify Partner
154 6 17

Hi, you can rebuild it from separate buttons to the form with one submit button. 

 {%- form 'localization'
    , id: 'localization_form_header'
    , class: 'header__localization-form' -%}

   code here...

 {%- endform -%}
If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
Raimer
Tourist
5 0 0

Can you make the code I make many codes and no one fully works.
It changes from LT to NL all works.
But from NL to LT is not changing back.
Here is the code.

{% render 'language_selector' %}
------------------

{%- form 'localization', id: 'localization_form_header', class: 'header__localization-form' -%}
<div class="localization-selector">
<label for="market-selector">Choose Region:</label>
<select id="market-selector" name="country_code">
{%- for country in localization.available_countries -%}
<option
value="{{ country.iso_code }}"
data-url="{% if country.iso_code == 'LT' %}/{% else %}/nl{% endif %}"
data-currency="{{ country.currency.iso_code }}"
{% if country.iso_code == localization.country.iso_code %}selected{% endif %}>
{% if country.iso_code == 'LT' %}🇱🇹 Lithuania (EUR)
{% elsif country.iso_code == 'NL' %}🇳🇱 Netherlands (EUR)
{% else %}{{ country.name }} ({{ country.currency.iso_code }}){% endif %}
</option>
{%- endfor -%}
</select>
</div>
{%- endform -%}

<script>
document.addEventListener("DOMContentLoaded", function () {
var selector = document.getElementById("market-selector");

selector.addEventListener("change", function () {
var selectedOption = selector.options[selector.selectedIndex];
var newUrl = selectedOption.getAttribute("data-url");

// Submit Shopify's localization form to apply language & currency changes
document.getElementById("localization_form_header").submit();

// Delay redirect to ensure Shopify updates settings first
setTimeout(function () {
window.location.href = newUrl;
}, 1000);
});
});
</script>



lynth
Shopify Partner
154 6 17

It should look like this, try to modify it, and ask GPT to help you with modification. If I help please mark my answer as a solution, if not then ask 😉

{%- form 'localization'
  , id: 'your-form-id'
  , class: 'your-form-class' -%}

  <div>
    <div>
      <span>Location & currency</span>
          <fieldset>
              <summary>
                {% for country in localization.available_countries %}
                  {%- if country == localization.country %}
                    <div>
                      <div class="icon">
                        {% if country.name == "Lithuania" %}
                          <span class="flag"></span>
                        {% elsif country.name == "Netherlands" %}
                          <span class="flag"></span>
                        {% endif %}
                      </div>
                      <span data-value="{{ country.iso_code }}">{{ country.name }} ({{ country.currency.iso_code }})</span>
                    </div>
                  {% endif %}
                {% endfor %}
              </summary>
              <div>
                {% for country in localization.available_countries %}
                  <input
                    id='{{ country.iso_code }}'
                    type='radio'
                    name="country_code"
                    value="{{ country.iso_code }}"
                    data-name="country-popup-selector"
                    {%- if country==localization.country %}
                    selected{% endif %}>
                  <label class='opt-label {%- if country == localization.country %} selected-country{% endif %}' for='{{ country.iso_code }}'>
                    <div>
                      <div class="icon">
                        {% if country.name == "Lithuania" %}
                          <span class="flag"></span>
                        {% elsif country.name == "Netherlands" %}
                          <span class="flag"></span>
                        {% endif %}
                      </div>
                      <span data-value="{{ country.iso_code }}">{{ country.name }}
                        <span>({{ country.currency.iso_code }})</span>
                      </span>
                    </div>
                  </label>
                {% endfor %}
              </div>
          </fieldset>
    </div>
    <button type="submit">Save</button>
  </div>
{%- endform -%}



If my tips are useful, just mark it as the solution. Cheers!
Feeling grateful? Buy me a coffee!
Raimer
Tourist
5 0 0

Thanks for your help.
 I am doing 3 days with GPT.
Looks like some code is blocking. Because a few times worked my code and then no more. Without editing.
Before was installed GLC Geolocation probably left some code. But not sure.

In console, I get this error message
Content-Security-Policy: Ignoring ‘block-all-mixed-content’ because mixed content display upgrading makes block-all-mixed-content obsolete.    nl
Removing unpermitted intrinsics lockdown-install.js:1:52832
Cookie warnings 7
Cookie “localization” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite nl
Cookie “cart_currency” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite nl
Cookie “wpm-test-cookie” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite 2 nl
Cookie “localization” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite search
Cookie “cart_currency” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite search
Cookie “localization” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite search
Cookie “cart_currency” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite search
Cookie “wpm-test-cookie” has been rejected for invalid domain. 2 nl








Raimer
Tourist
5 0 0

Hello

Where could the code conflict be? Where should I check to disable conflicting code?

Also, why does switching to EUR currency require a separate button for each EU country? Shouldn't it work as a single selection for all EU countries?

Any solution ideas?