In Shopify, language switchers are used to make e-commerce stores multilingual by enabling visitors to switch between different language versions of the store.

This functionality is particularly important for businesses targeting international customers, as it allows them to browse and shop in their preferred language, improving accessibility and user experience.

This article will guide you on how to enable Translation Lan's language switcher in your store:

Language switcher:

Custom Position
Header Position (Developer)
General Settings

To enable the language switcher in your store, go to the Switchers menu inside the app, which will take you to the app embeds section of the theme Customizer:



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

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(default position) 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:

Position

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:



Adjusting the top, right, bottom, left spacing values will move the switcher for the direction you are changing them, higher value will push it further away, lower value will drag it closer to that side (how many pixels is the distance from the switcher to the end of the screen):

Styling

The other available styling options can be found at the very bottom.


Font-size - changing the size will adjust how big is the text in the switcher;
Border width - if border width is more than 0 (>1), it will add a square border around the switcher widget;
Text color - change the color of the text on and inside the switcher;
Background color - you can choose the background color of the switcher widget;
Border color - will only work if you have added border width greater than 0px, if that's true, you can select a custom color for the border;

further customizations to the styling can be made only through the "Custom CSS" field which will require some HTML/CSS knowledge and experience.

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.

Every Shopify theme is unique and there are no universal selectors that can be used all around. It will require manual approach & experience to determine the best selector for the position you want want the switcher to be showing in.

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 " header switcher reference element " and " mobile switcher reference element ":

Relative Position

Before - This will visualize/position the switcher snippet before the selector (class) you have pointed;
After - This will visualize/position the switcher snippet after the selector (class) you have pointed;
Inside prepend - This will visualize/position the switcher snippet inside the selector (class) you have pointed at first position;
Inside append - This will visualize/position the switcher snippet inside the selector (class) you have pointed at last position;

Reference Elements (selectors)

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

The fields are 2, for your own convenience, as depending on the scenario & the selector you have added, you might need to use a different relative position.

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.

The placeholder examples such as ".header-bar__search" are just for illustration purposes, it's highly likely that the theme you are using will not have such selector and the switcher will not show up in the header, even if you have a search bar in your header, the HTML structure might be entirely different.

General Appearance Settings

Those settings will affect both Custom & Header position.

Flags

You can enable/disable flags for the switcher with the following toggle:
If enabled, it will show flags in the widget & the dropdown.

Language to country flag mapping

With the following option you are able to change the appearance of flag:


By following our example, we are going to add " en:US " to this field which will display the USA flag for the English language.


The login behind is " languageShortCode:countryShortCode " while keeping the "lowercase:UPPERCASE" example.

Switcher Appearance

Language name - the languages will be shown with their full names, e.g. "English";
Language code - the languages will be shown with their full names, e.g. "EN";
Language code for mobile - while on desktop devices the language will be shown in full - "English", but on mobile (smaller screen devices) it will be shown as "EN" (responsive option);
World icon - if selected, instead of having flag/language in the widget, it will show a globe icon;


the dropdown will still look as usual, and will still be affected by the other options in the app embed;

You can also upload your own icon:

as long as it follows Shopify's basic requirements to be uploaded as a file in your store - you will be able to select it;

"invert switcher icon colors" will reverse the colors, e.g. black becomes white, white becomes black, blue becomes orange and so on.

Dropdown Appearance

Language name - the languages will be shown with their full names, e.g. "English";
Language code - the languages will be shown with their full names, e.g. "EN";

Updated on: 19/12/2024