How to create an email template for another language?

This article is a step-by-step tutorial that will drive you into the translation of the default email templates in a new language.

Introduction

By default, your account at Bigblue comes with two default email templates, one for English speakers and another one for French speakers.
Let's say you want to add a different language, for example Italian 🇮🇹, here is how to proceed.

→ Below, we will describe one way to do it - by editing the default email template, and use a variation of the wording in it. But you can also use other alternatives, please refer to the comment section at the very bottom of the article for more information.


1. Create a new template

To create a new email template:

  • Go to the email templates section (below the envelope icon ✉ on the left-hand side navigation menu, or by clicking on this link https://app.bigblue.co/emails)
  • Scroll to the bottom
  • click on Add a template.


2. (optional) Change the email template title
to make sure you can easily retrieve it later on

The edition of an email template page consists of two windows: the email editor on the left-hand side and the real-time email viewer on the right-hand.

3. Change the email object

And translate it to its equivalent in the given language.

4. Change the email content

Copy paste the code below in the left-hand side code section.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text font-size="14px" line-height="22px" color="#333333" font-family="Roboto, Helvetica, Arial, sans-serif" />
      <mj-class name="main-section" background-color="white" border-radius="6px" />
      <mj-class name="default" color="#222B45" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#EDF1F7">
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="{{ tenant_logo_url }}"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section mj-class="main-section">
      <mj-column>
        <mj-text mj-class="default" font-size="22px" line-height="30px" padding-top="24px" padding-bottom="16px">
          <h1 style="font-size: 24px; font-weight: 600; margin: 0; padding: 0;">TRANSLATE 'Shipment Update'</h1>
        </mj-text>
        <mj-text mj-class="default">TRANSLATE 'Hi' {{ customer_first_name }},</mj-text>
        <mj-text mj-class="default">
          {{# if (equal status "IN_PREPARATION")}} TRANSLATE 'Your package is in preparation'
           {{ else if (equal status "SHIPPED")}} TRANSLATE 'Your package has shipped'
            {{else if (equal status "IN_TRANSIT")}} TRANSLATE 'Your package is in transit'
              {{else if (equal status "OUT_FOR_DELIVERY")}} TRANSLATE 'Your package is out for delivery'
                {{else if (equal status "FAILED_ATTEMPT")}} TRANSLATE 'Your package was unable to be delivered'
                  {{else if (equal status "BACKORDER")}} TRANSLATE 'Your order has been placed on backorder'
                    {{else if (equal status "AVAILABLE_FOR_PICKUP")}} TRANSLATE 'Your package is available for pickup'
                      {{else if (equal status "DELIVERED")}} TRANSLATE 'Your package has been delivered'
                        {{else}} TRANSLATE 'Your package has changed status' {{/if}}
          ({{#if parcel_number}}TRANSLATE 'parcel' <b>{{parcel_number}}</b>{{else}}TRANSLATE 'order' {{order_id}}{{/if}}).<br />
          {{#if tracking_url}}TRANSLATE 'For more details, track your parcel by clicking on the link below'.{{/if}}</mj-text>
        {{#if tracking_url}}
          <mj-button background-color="#1F70F2" padding="20px 0 20px" inner-padding="14px 20px" font-weight="500" href="{{ tracking_url }}" target="_blank"><span style="letter-spacing:1px">TRANSLATE 'TRACK MY PACKAGE'</span></mj-button>
        {{/if}}
        <mj-text mj-class="default">TRANSLATE 'If you have any questions about the shipment, simply reply to this email or reach out to our support team for help.'</mj-text>
        <mj-text mj-class="default">TRANSLATE 'Cheers', </br> TRANSLATE 'The {{ tenant_name }} team'</mj-text>
      </mj-column>
      </div>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text color="#8C8C8C" align="center" padding="0 0 32px 0"><span style="line-height: 24px; font-size: 11px; margin-right: 4px">Powered by</span><a href="https://bigblue.co?ref=tracking-email" target="_blank"><img height="24px" width="24px" align="center" src="https://cdn.bigblue.co/email/logo-round.png" /></a></mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

5. Translate the sentences

Look for all the occurrences of the word TRANSLATE, remove them, and translate the sentence displayed between the quotes TRANSLATE 'A sentence to translate'.

You can also modify the content, remove or edit some of the sentences proposed by-default if you want to.

6. Double-check the content via looking at the rendering on the right and switching the placeholder data to the different possible statuses

Comment - You can also create one template per status per language, and keep its content very specific to the order status use case. In that case, you will create multiple email templates and I advise you to name them accordingly, for example :   Template_Italian_ShippedTemplate_Italian_InPreparationTemplate_Italian_AvailableForPickup, etc.). In each template, you will have only one version of the wording (compared to having multiple if/else like above). 


What if you want to make emails specific to a shop?
If one of your shops is localized for countries besides French and English-speaking countries (for example, specialized to Italy, and Italy only), you can also use the variable shop_id to adapt the wording. Similarly to above, whenever you want to specialize a sentence, you can use

 {{# if (equal shop_id "THE_ID_OF_YOUR_INTERNATIONALIZED_SHOP")}}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us