Template Files
Templates Directory
Custom Templates
Customize Stencil Checkout
Handlebars Syntax and Helpers
Handlebars.js
Handlebars Helpers
Stencil Object Model
Stencil Objects

Invoking Translation Keys

Translation Syntax

Once keys and values are defined in the appropriate .json translation files, you invoke dynamic translation strings using the Stencil framework’s {{lang}} custom Handlebars helper. Your invocation would follow this generic format:

{{lang "translation.key" optionalVariable=”someValue”}}

Here is how this works. In a non-internationalized theme, a storefront page might include a static/dynamic string like this:

<a href="{{ urls.account }}">Welcome Back <span>{{ customer.name }}</span></a>

The corresponding internationalized version – ready to work with any language – would substitute the fully dynamic {{ lang... }} Handlebars helper shown below:

<a href="{{ urls.account }}">{{ lang "header.welcome_back" name=customer.name }}</a>


Video Demo

Watch a video demonstration of how JSON translation files’ key/value pairs interact with your templates’ Handlebars statements to localize your storefront pages:

File Permissions Required

Be sure to set permission 644 (rw-r–r–) on any new translation files that you add. Without these permissions, running your theme locally will fail, with multiple error messages. Bundling your theme will also fail, blocking its upload to a store.