Translations

Theme templates can be fully localized with translations so that your store visitors are shown content in their local language. Use the t (translation) tag in your templates to access string translations in the locale files. Learn more about the t tag and theme Locale files.

Using Translations in Practice

The t tag accepts an initial argument that is the key reference to the translation string in a locale file.

Template

<h2>{% t 'customer.orders.order_history' %}</h2>

en.default.json

{
    "orders": {
        "order_history": "Order History"
    }
}

Result

<h2>Order History</h2>

Passing Variable Arguments to Translations

You can pass multiple named arguments to translations through the t tag used in the translation.

Template

<h2>{% t 'customer.profile.welcome_msg' with name=request.user.first_name %}</h2>

en.default.json

{
    "customer": {
        "welcome_message": "Hi {{ name }}, welcome to your account!"
    }
}

Result

<h2>Hi John, welcome to your account!</h2>

Pluralization Support

The t tag accepts two arguments for pluralization:

• Pass the count argument with a value for cardinal pluralization, ie 1, 2, 3, 4.
• Pass the index argument with a value for ordinal pluralization, ie First, Second, Third, Forth.

Pluralization rules follow Unicode CLDR specification, available keys include:

• one
• other
• two
• zero
• few
• many

Cardinal Pluralization

Cardinal pluralization can be used to display different translations based on the value passed to count.

Template

<h2>{% t 'customer.notifcations.total' with count=notification.count %}</h2>

en.default.json

{
    "customer": {
        "notifcations": {
            "one": "You have {{ count }} notification.",
            "other": "You have {{ count }} notifications.",
            "zero": "You don't have any notifications."
        }
    }
}

Result

<!-- Count is 1 -->
<h2>You have 1 notification.</h2>

<!-- Count is 3 -->
<h2>You have 3 notifications.</h2>

<!-- Count is 0 -->
<h2>You don't have any notifications.</h2>

Ordinal Pluralization

Ordinal pluralization can be used to display different translations based on the index value to display the ordering of an object.

Template

<h2>{% t 'customer.orders.orders_msg' with index=customer.orders.count %}</h2>

en.default.json

{
    "customer": {
        "orders_msg": {
            "one": "Congrats on your {{ index }}st order!",
            "two": "Congrats on your {{ index }}nd order!",
            "few": "Congrats on your {{ index }}rd order!",
            "other": "Congrats on your {{ index }}th order!"
        }
    }
}

Result

<!-- Count is 1 -->
<h2>Congrats on your 1st order!</h2>

<!-- Count is 2 -->
<h2>Congrats on your 2nd order!</h2>

<!-- Count is 3 -->
<h2>Congrats on your 3rd order!</h2>

<!-- Count is 4 -->
<h2>Congrats on your 4th order!</h2>