Lokalise provides a customizable language switcher to help your customers view your website in their preferred language. This feature allows for an easy switch between the different languages your store supports.
How to enable language switcher
Steps to enable the language switcher:
Open your Lokalise Flow project.
Go to Settings and select Language switcher.
Click on Enable language switcher. This will redirect you to your Shopify store theme.
In the right-side panel, you might find the Language Switcher option set to "off". Click on the toggle to turn it on.
Click Save at the top right corner of the screen.
You can now close the tab and return to your Lokalise project.
The language switcher will automatically appear on your site once at least one language is published for your store:
Configuring language switcher
You can configure the language switcher on the same page where you initially enabled it. A few customization options are available, and you can preview your choices in the right panel before publishing the changes live.
Position and offset
Position — you can place the switcher in one of four corners of the screen: bottom-left, bottom-right, top-left, or top-right.
Offset — fine-tune the switcher's position by adjusting the vertical and horizontal offsets. These settings control how far it is from the edges of the screen, allowing you to move it higher or more to the side.
View image
View image
Display
This group of settings allows you to customize how the switcher is displayed.
Switcher size — choose the switcher size that best fits your site’s design:
Small — a compact option that takes up minimal space.
Medium — a balanced size for easy visibility without overwhelming the page.
Large — a more prominent switcher, ideal for high visibility
Language name — choose how the language name will be displayed:
Full name — all languages will have "regular" names plus names translated into the language itself, for example, English (English), Spanish (Español), and so on.
ISO codes — languages will be replaced with their corresponding ISO codes, for example, EN, ES, FR, and so on.
Icons — choose whether an icon should be displayed next to the languages:
None — the icon won't be displayed.
Globe — a small globe icon will be displayed to the left of the currently selected language name. Other languages won't have any icons.
Flags — country's flag associated with the language will be displayed for every locale, including unselected ones.
View image
View image
Style
In this section, you can fully customize the switcher appearance by providing color codes and enabling shadow.
The following settings are available:
Background color — set the background color of the switcher.
Text color — customize the color of the text within the switcher.
Border color — define the color of the switcher’s border.
Hover state color — choose the color displayed when the switcher is hovered over.
Pressed state color — select the color that appears when the switcher is pressed.
Arrow color — set the color of the arrow icon in the switcher.
Show or hide shadow — enable or disable the shadow effect around the switcher.
View image
View image
