Documentation
Feedback
Guides
API Reference

Guides
Getting Started

Integration Guides




Payments

Orders

Fulfillment

VTEX inStore

UI Customization

Message Center

Pricing

Promotions

Infrastructure

Conversational Commerce

Search

VTEX Session

VTEX inStore
How to customize inStore
Change inStore language

Currently, it is possible to use inStore in Portuguese, English, or Spanish.

By default, the application's language is Portuguese, but you can change it by editing the checkout-instore-custom.js file. Check out the How to customize inStore guide for further information on how to access this file.

Edit the checkout-instore-custom.js file

To change the language used on inStore, first check if the checkout-instore-custom.js file contains the following lines of code:

window.LOCALE_MESSAGES = { locale: 'pt', messages: { pt: { }, }, }; function setNewLocaleMessages() { const localeEvent = new Event('changeLocaleMessages') localeEvent.data = window.LOCALE_MESSAGES document.dispatchEvent(localeEvent) } if (window.inStoreIsLoaded) { setNewLocaleMessages(); } else { document.addEventListener( 'load.instore', function() { setNewLocaleMessages(); }, false ); }

If the code above already exists in your checkout-instore-custom.js file, move on to the next step. If only part of it is in your file, replace the current snippet with all the code above.

The language of the application is defined by the locale property, which is found in line 3 of the code above (locale: 'pt'). Note that, in this case, inStore is set to Portuguese (pt).

To change the language, you must replace the locale value with the desired language code.

Check out the possible values for this property:

NameTypeDescriptionPossible values
localestringSets the language used on inStore. Use pt for Portuguese, en for English or es for Spanish.- pt
- en
- es

Example

If you want to change inStore's language to English, for example, replace the pt value with en. The resulting code snippet should look like this:

window.LOCALE_MESSAGES = { locale: 'en', messages: { en: { }, }, };

After making changes in the code, make sure you press the Save button.

Check out your changes

To see the reflected changes on inStore, enter the menu and click the Reset app local data button, as shown in the image below.

{"base64":"  ","img":{"width":845,"height":1716,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":229762,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/change-instore-language-0.png"}}

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Customize inStore login options
Hide anonymous customer option
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page