This article will guide you how to integrate the language switcher in your store, so that customers can choose a language.

To enable the language switcher in your store, go to the Switchers tab in T Lab and click the button, that will take you to the app embeds section of the theme Customizer:



Once there, you have to enable the Language switcher app embed:



There are two switcher types depending on their position:

Custom switcher position - configure a floating switcher
Header switcher position - integrate the switcher in your header

Custom switcher position - configure a floating switcher

The Custom switcher position type is selected by default and the switcher should appear in the top-right corner once you enable the app embed:



You may further customize the switcher settings by scrolling down to the Custom Position Settings part of the app embed settings:



For position, you may select in which corner you wish the custom position switcher to appear - top right, top left, bottom right or bottom left:



The top, right, bottom, left fields are used to tell how many pixels is the distance from the switcher to the end of the screen:



And at the bottom, you can select the font size of the switcher's text, the switcher border tickness, as well as tweak the colors:

Header switcher position - integrate the switcher in your header

The header switcher type allows much more flexibility and options to make the switcher feels native to your theme's design on both mobile and desktop devices.

However, this type of switcher requires some HTML/CSS knowledge, so you have to consult with a developer

If you are on the Pro plan or higher, our developers will provide custom design for your switcher. Please contact us for more details

To manually integrate the switcher type wherever you wish in your theme, first, under the Switcher position, select Header:



Then, you should populate those two settings:



For the Header switcher reference element, add the CSS selector of the element, where you wish the language switcher to be added on desktop. You can also change the Header switcher relative position setting, depending on whether you wish the switcher to appear before, after or inside the element which you have chosen.

The Mobile switcher reference element and Mobile switcher relative position settings are the same, but for the mobile switcher.

Depending on the theme's desing, you might need to populate only the desktop switcher selector.

Updated on: 27/11/2023