Customizing a language and currency switcher
You can style the language and currency switcher by changing the colors, applying new fonts, adjusting the switcher's position, and applying some extra customizations for the button to perfectly match your store design.
Note
For users with old switcher design (customized before November 2022), the switchers will look and work the same as before, until you add and save any changes to switchers or geolocation popup (autodetection).
On this page:
Switcher visibility
Customize for device
General customization
Advanced customization
There are three main visibility statutes of your language and currency button that you can manage. You can disable the switcher, make it visible for admin only, and publish the language button for customers.
Steps:
From your LangShop admin, go to Settings > Switchers.
This is the main page in the app where you can customize a language and currency (country) switcher as well as a Geolocation popup.
At the left sidebar panel, find Language and currency switcher.
You can work with the sidebar panel and at the same time track all the changes you are applying at your storefront.
Change the visibility of your switcher to Published and save.
Click Edit switcher to start customization.
In this section, you can choose what device subsequent customizations will be related to. For example, you can set different templates or set top-left switcher position for desktop and bottom-right for mobile. You can also disable the switcher for a specific device or adjust mobile customizations to desktop ones.
Subsequent customizations, both general and advanced, will be related to the chosen device.
In General settings you can select a switcher template, decide on its position, specify elements, labels and flags.
Templates
Templates is a mandatory customization section. Here you can choose the switcher look and feel.
Displayed elements
In the displayed elements section you can select what elements you want the switcher to display: language, currency or both language and currency.
If your store has 2 or more Markets, LangShop currencies are not available, same as currency element for switcher. Instead, you are allowed to offer country switching, which enables Shopify to change the currency depending on the Market the country belongs to.
Note
If the store has only one language/currency/country, the switcher won’t display this element. For example, the store with only US Dollar currency added, won’t display the currency in the switcher even if it’s customized until more currencies are added.
So, stores with multiple Markets (even if they are disabled) are allowed to display the following elements on the switcher: language, country or language and country.
Note
The language and country switcher has some peculiarities: when switching a country, there will be only languages related to the Market this country belongs to in the list of languages. For example, in the Market Europe you have Spain & Luxembourg countries and Spanish & German languages added. In other markets, you also have Danish and English languages, but the visitor will see only Spanish and German languages once they choose Spain, as it belongs to the Market Europe.
Language label
In the language label section you can specify how the element will look in the switcher. The language can be displayed through language code (EN), language name (English) or native language name, which you can set in the Settings > Languages > choose language > Displayed title.
You can also decide whether to display a flag for the language element in the switcher.
Currency label
In the currency label section you are allowed to choose between currency name (US Dollar) and currency code (USD).
You can also decide whether to display a flag for the currency element in the switcher.
Country label (for stores with 2+ Markets)
In the country label section you are allowed to choose between country name (United States) and country code (US).
You can also decide whether to display a flag for the country element in the switcher.
Position
Then you can specify the position and offset of the switcher. If you want a custom position turn to Advanced settings.
In the Advanced settings tab you can specify switcher and its dropdown style, font, border, stylize arrow and find snippets to set a custom position of the switcher on the store. All customizations in the Advanced settings tab are applied to both language and currency elements.
Advanced settings can only be applied on Standard and Advanced plans, for the other plans only the preview option (test without saving) is available.
Switcher style
In the switcher style section you can set flag rounding, specify background color and padding. Also, you can customize the font of the text in the switcher, changing its size, family and color. The border width, radius and color also can be customized here.
Dropdown style
In the dropdown style section you can set dropdown background color and padding, customize font of the dropdown text by changing size, family and color, specify the border width, radius and color. Also, you can change the switcher arrow size and color here.
DEV MODE
In the DEV MODE section you can find switcher snippets (switcher tag), which help you add a switcher to a custom position. For it, you’ll need to copy the tag and incorporate it in the theme.
Note
Pay attention that switcher tag has Desktop, Mobile and All versions. By incorporating a desktop tag into the theme, the switcher will be displayed for desktop users only. If you want to display the switcher for all devices, choose the ALL option.
Note
For users with old switcher design (customized before November 2022), the switchers will look and work the same as before, until you add and save any changes to switchers or geolocation popup (autodetection).
On this page:
Switcher visibility
Customize for device
General customization
Advanced customization
Switcher visibility
There are three main visibility statutes of your language and currency button that you can manage. You can disable the switcher, make it visible for admin only, and publish the language button for customers.
Steps:
From your LangShop admin, go to Settings > Switchers.
This is the main page in the app where you can customize a language and currency (country) switcher as well as a Geolocation popup.
At the left sidebar panel, find Language and currency switcher.
You can work with the sidebar panel and at the same time track all the changes you are applying at your storefront.
Change the visibility of your switcher to Published and save.
Click Edit switcher to start customization.
Customize for device
In this section, you can choose what device subsequent customizations will be related to. For example, you can set different templates or set top-left switcher position for desktop and bottom-right for mobile. You can also disable the switcher for a specific device or adjust mobile customizations to desktop ones.
Subsequent customizations, both general and advanced, will be related to the chosen device.
General customization
In General settings you can select a switcher template, decide on its position, specify elements, labels and flags.
Templates
Templates is a mandatory customization section. Here you can choose the switcher look and feel.
Displayed elements
In the displayed elements section you can select what elements you want the switcher to display: language, currency or both language and currency.
If your store has 2 or more Markets, LangShop currencies are not available, same as currency element for switcher. Instead, you are allowed to offer country switching, which enables Shopify to change the currency depending on the Market the country belongs to.
Note
If the store has only one language/currency/country, the switcher won’t display this element. For example, the store with only US Dollar currency added, won’t display the currency in the switcher even if it’s customized until more currencies are added.
So, stores with multiple Markets (even if they are disabled) are allowed to display the following elements on the switcher: language, country or language and country.
Note
The language and country switcher has some peculiarities: when switching a country, there will be only languages related to the Market this country belongs to in the list of languages. For example, in the Market Europe you have Spain & Luxembourg countries and Spanish & German languages added. In other markets, you also have Danish and English languages, but the visitor will see only Spanish and German languages once they choose Spain, as it belongs to the Market Europe.
Language label
In the language label section you can specify how the element will look in the switcher. The language can be displayed through language code (EN), language name (English) or native language name, which you can set in the Settings > Languages > choose language > Displayed title.
You can also decide whether to display a flag for the language element in the switcher.
Currency label
In the currency label section you are allowed to choose between currency name (US Dollar) and currency code (USD).
You can also decide whether to display a flag for the currency element in the switcher.
Country label (for stores with 2+ Markets)
In the country label section you are allowed to choose between country name (United States) and country code (US).
You can also decide whether to display a flag for the country element in the switcher.
Position
Then you can specify the position and offset of the switcher. If you want a custom position turn to Advanced settings.
Advanced customization
In the Advanced settings tab you can specify switcher and its dropdown style, font, border, stylize arrow and find snippets to set a custom position of the switcher on the store. All customizations in the Advanced settings tab are applied to both language and currency elements.
Advanced settings can only be applied on Standard and Advanced plans, for the other plans only the preview option (test without saving) is available.
Switcher style
In the switcher style section you can set flag rounding, specify background color and padding. Also, you can customize the font of the text in the switcher, changing its size, family and color. The border width, radius and color also can be customized here.
Dropdown style
In the dropdown style section you can set dropdown background color and padding, customize font of the dropdown text by changing size, family and color, specify the border width, radius and color. Also, you can change the switcher arrow size and color here.
DEV MODE
In the DEV MODE section you can find switcher snippets (switcher tag), which help you add a switcher to a custom position. For it, you’ll need to copy the tag and incorporate it in the theme.
Note
Pay attention that switcher tag has Desktop, Mobile and All versions. By incorporating a desktop tag into the theme, the switcher will be displayed for desktop users only. If you want to display the switcher for all devices, choose the ALL option.
Updated on: 09/11/2023
Thank you!