One Button for Language and Currency Selection

[Raimer]

Hi everyone in the same boat,

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,

[DaisyVo]

Hi @Raimer 

I see that you're trying to simplify the selection process by merging the language and currency switcher into a single button while ensuring the correct products appear for each market. Right now, having separate buttons works fine, but hiding one disrupts the product visibility per market, which means Shopify’s market settings and translations are tied to separate controls.

Solution:

To create a single button that switches both the language and currency at the same time, you’ll need to customize your theme’s code by combining the language and currency switchers into a unified function.

Here’s how you can do it:

1. Modify the Theme Code

You'll need to create a button that updates both the locale (language) and currency together when clicked. Open your theme’s header.liquid (or the file that contains the current language and currency selectors) and add the following:

<script>

document.addEventListener("DOMContentLoaded", function() {

    const switchButton = document.getElementById("locale-currency-switch");

    switchButton.addEventListener("click", function() {

        let currentLocale = document.documentElement.lang; 

        let newLocale = (currentLocale === "lt") ? "nl" : "lt"; 

        let newCurrency = (newLocale === "nl") ? "EUR" : "EUR"; // Adjust currency if needed

        // Redirect to the correct locale and currency URL

        let newURL = new URL(window.location.href);

        newURL.searchParams.set("locale", newLocale);

        newURL.searchParams.set("currency", newCurrency);

        window.location.href = newURL.toString();

    });

});

</script>

<button id="locale-currency-switch">

    Switch to <span id="next-locale">NL</span>

</button>

2. Update the Language and Currency Settings in Shopify

Make sure that:

• Your store has Shopify Markets set up correctly for both LT and NL.
• Both languages (LT & NL) are enabled under Settings → Languages.
• The respective currency (LT EUR, NL EUR) is assigned under Markets → Market Settings.

3. Ensure the Correct Products Load Per Market

• Go to Settings → Markets and verify that each market has specific product catalogs enabled.
• Shopify automatically adjusts the product visibility based on the market setup, so linking the locale and currency via URL parameters should resolve the issue.

Final Thoughts

This method will allow you to have a single button that dynamically switches both language and currency while keeping the correct products visible per market. Since Shopify’s system already handles region-based product availability, using the locale and currency parameters together ensures a smooth customer experience.

If you need any other assistance, feel free to ask, and I will try my best to support you.
Best regards,
Daisy.