4

Localize Design Studio emails

To localize messages you create with Design Studio, you’ll need to use liquid or set up branches for each language you want to support.

Branch translated messages based on language preferences

In campaigns and API-triggered broadcasts, you can set up branches for each language you want to support:

1. In Design Studio, create your message in one language.
2. Translate the message into each language. (Learn more about exporting and importing email to Design Studio.)
3. Add each translation to a new Design Studio email.
4. In your campaign, add a multi-split branch to your workflow.
5. Create as many paths as there are language variants. Add a condition to each path that filters users based on how you identify people’s language preferences.
6. Add an email block to each branch then connect the appropriate Design Studio message to each one.

This campaign is now set up to send the correctly translated, Design Studio email based on people’s language preferences.

Add liquid conditionals to a single message

You can use this method across any campaign, API-triggered broadcast, newsletter, or transactional message.

In Design Studio, create your message with all your translations. Then add liquid within text-based components in the visual editor or go to the code editor and wrap components in liquid to conditionally render them.

Conditionally render text within a component

You can add liquid to any text-based standard component through the visual or code editors. Add liquid if statements to conditionally render translated content based on a recipient’s language preference. In this example, we’re capturing people’s language preferences in the language attribute.

    {% if customer.language == "es" %}
    Spanish translation
    {% elsif customer.language == "ru" %}
    Russian translation
    {% elsif customer.language == "de" %} 
    German translation
    {% else %}
    Default translation
    {% endif %}

Preview your message with recipients that have different language preferences to make sure your liquid works as expected.

Conditionally render entire components

To conditionally render entire components based on a person’s language preference, you’ll need to switch to the code editor. Here’s an example of conditionally rendering images:

{% if customer.language == "es" %}
  <x-image src="image-spanish" />
{% else %}
  <x-image src="image-default" />
{% endif %}

Note that the liquid conditional wraps around the components.

Then click the personalization icon at the top of the editor to preview your message with recipients that have different language preferences.