Locale Switcher

The Locale Switcher app provides a component capable of changing the current language of your store.

{"base64":" ","img":{"width":73,"height":152,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":3496,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-locale-switcher-0.png"}}

Configuration

Add the Locale Switcher app to your theme's dependencies in the manifest.json file:


_10 "dependencies": {
_10+  "vtex.locale-switcher": "0.x"
_10 }

Add the locale-switcher block to your header. For example:


_10"header-row#desktop": {
_10  "children": [
_10    // (...)
_10    "locale-switcher",
_10    "login",
_10    "minicart.v2"
_10  ]
_10},

Open a ticket to our support team in order to adjust your store's binding with the desired languages.

*Caution: The third step is mandatory. If no ticket is opened requiring the desired languages, the selection list may not appear on the Locale Switcher component.*

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`button`
`buttonText`
`container`
`list`
`listElement`
`localeIdText`
`relativeContainer`