You can localize your Stencil theme for your desired target language. This tutorial describes how to localize a storefront in Spanish. By following this method, you can display a specific language based on the language selected in the viewer’s browser. By the end of this tutorial, you will have the tools to localize most areas of your theme.
In this tutorial, we will use Stencil CLI and Browsersync to serve up a live preview of a theme in development.
To complete this tutorial, you should be familiar with the following concepts:
/lang subfolder.The /lang subfolder includes the en.json file and example language files. The en.json file and your language file must be present for a localized Stencil theme to work. Each language requires its own JSON file.
Name your translation file es.json and save it in the /lang subfolder. Translation files are named based on the BCP 47 specification of language and region codes.
Copy the desired key-value pairs from the en.json file and paste them into your newly-created es.json file. Update the values to create your language file.
Perform the following steps to create new key-value pairs and invoke a defined translation key.
In en.json, add new_hours key and corresponding information for the value.
In es.json, add the same new_hours key and the Spanish translation of the value.
lang directive in the appropriate file to show a translated string.For this example, update /templates/components/common/header.html using the code below. Add the code after the {{/if}} tag and before the <header> tag.
Update your language browser to display the translation on the storefront. The following steps are for the Chrome browser.
Other browsers may look and act differently. We suggest previewing your site to ensure the localization is working as expected.