Email notifications are messages sent to store owners and customers to inform users of various events that happen in the store: an order is placed, order status changes, a product’s stock is getting low, etc.
All the emails have universal ready-to-go texts, which can fit any business. You can use them straight away or customize their texts and appearance. It is possible to brand the emails with your business-specific colors, rework their layouts, remove or add text blocks, etc. Each email notification has its own template which you can edit in your store admin, Settings → Mail.
Understanding email templates
Each admin or customer email notification has its own template. When an email is sent, the email template is filled in with the info from your store settings (store name, contact info, store link, etc.) and from the order details (customer’s name, shipping address, list of products bought, etc.) Thus, each email sent from your store is individual and contains all the information about a particular order and customer.
Here is an example of an abandoned cart recovery email that’s sent to a customer who doesn’t complete an order and leaves items in their cart. The customer will see the email this way:
The template for this email in the store admin looks like this:
You can make small changes like adding a coupon code or a message about an upcoming sale without any knowledge of coding. The easiest way to edit the template is to add text – you can add a custom text instead of the plain text that displays in black in the template.
More serious changes, like changing the design and the layout of the template, will require the knowledge of HTML and Freemarker — the languages used in the templates.
Let’s dive deep into understanding the different parts of an email template and how to edit them: plain texts, variables, and markups.
Plain text
The text that you see in black is plain text. Text here is sent in the emails in exactly the same way as you see it in the template.
You can easily edit plain texts that you see in black in the templates: simply edit or remove the text. For example, if you sell customized products, you can replace “will process it shortly” in the order confirmation template with something like “your order will be processed within a week.” Also, if you want to inform customers about ongoing promos or sales, you can add a message about it near the black text — that’s the easiest way to add custom messages to email templates:
Order confirmation email template
Editing text in the “Abandoned Cart Recovery” email template is even easier as its plain text is presented in a special area of the template. You can type your message in the “Default message for customers” area. For example, you can include a coupon code in recovery emails to encourage customers to complete the purchase.
Variables
Variables are placeholders that are replaced in the email with the actual information from either the order details (customer’s name, list of products, etc.) or from the store info (store name, contact info, etc.). For example, you can see variables like ${store.name} or ${customer.name}. As you can guess by their names, they will be replaced in email notifications with the store name taken from your store profile settings (Settings → General → Store profile) and with the customer’s name taken from the order details.
Markup
The text in blue, green and red is called markup. These are rules that tell the email client how to display the text in the email: font color, size, padding, etc. You can change the markup rules if you want to change the layout and the design of your email.
Editing notification template
To add custom messages to the email template or to customize it in any other way, you should edit its template. Email templates use variables to refer to the store or customer information — you can remove, edit, or add variables that are supported in emails. Email templates use Freemarker to replace variables with actual values and for their conditional rendering while HTML tags define the structure of the email templates and how they look in inboxes.
To edit an email template:
- From your store admin, go to Settings → Mail.
- Click Edit next to the template you want to change.
- In the HTML template, make the desired changes.
- Before saving any changes, click the Preview template link on top to see what the email will look like.
If you see a blank page in a preview, it most likely means that the template code was broken (some tags were accidentally deleted). If you see this, revert to the default template and try making your changes again.
- If you don’t like the result, click the Revert to default link at the bottom of the template to restore the default email template.
- Once you are satisfied with the result, click Save.
If you are making changes to a template that you previously customized and saved, the “Revert to default” option won’t work for you as it will revert to the default template. To backup your new template, copy the email template and save it as a text file on your computer before editing it. If something goes wrong, you can paste the code from the file back to the template.
To check how email notifications will look with your changes, place a test order in your store. A test order is the best way to test email template changes as the preview shows demo products and data. Use your real email address at checkout as this is where the email will be sent to. You should also change the order payment and fulfillment status in your store admin to receive different email notifications (order status changed, order shipped, etc.).
Examples of template modifications
Example 1. If you’ve specified your company phone number in the store settings, this number is included into order confirmation emails by default via the ${store.officeAddress.phone} variable. In case you want to remove your phone number from order confirmations sent to your customers while keeping it in the store settings, delete the following piece of code from the order confirmation template:
<#if (store.officeAddress.phone)?has_content>
or call <b>${store.officeAddress.phone}</b></#if>
After that, the phone number won’t be displayed in Order Confirmations sent by your store to buyers.
Example 2. If you want to show another company address in emails (not the one that you specified in store admin → Settings → General → Store profile), you can replace the ${store.officeAddress} variable with the address that you want to show in emails by adding the latter as a plain text.
Example 3. If you need to specify a list of elements in a template, use this construction:
<#list order.items as orderItem>
${orderItem.name}
</#list>
Learn more about the Freemarker language used in email templates.
Changing company info in emails
The company info (store name, store link, physical address, etc.) that you see in email notifications is taken from your store settings. If you want to change this info in your emails, you should update it in your store admin, go to Settings → General → Store Profile.
Company info in the order confirmation email template
Adding a logo to emails
To upload or change a logo in your mail notifications:
- From your store admin, go to Settings → Mail.
- Scroll down to the bottom of the page to Your logo for mail notifications.
- Click Upload logo.
- Upload your store logo and save the changes.
This logo will be used in all customer notifications.
Changing your email notification language
When you create a new store account, the language used in your email notification templates is the same as the language of your store admin. That means that plain texts, order payment and fulfillment statuses, etc. in email notifications for you and your customers will be in this language. Product details, your company address, and the customer’s info will also be in this same language.
If you use the store admin in a language that email notifications are not translated into yet, they will be translated into English — that’s the default language.
You can change the language of your email notifications at any time. For example, if your customers are from Italy, but you prefer viewing the store admin in English, you can set Italian for emails and keep using the store admin in English.
You can set the language for your storefront in your store admin, go to the Setting → General → Regional Settings → Store Language. Click Language settings and choose the desired language.
Email notification templates are translated into:
- English
- Russian
- German
- French
- Italian
- Spanish
- Portuguese
- Dutch
- Danish
- Finnish
- Japanese
- Norwegian
- Polish
- Czech
To change the language in your email notifications:
- From your store admin, go to Settings → Mail.
- Click Edit next to the notification that you want to change the language of.
- Switch the language in your store admin: click on the Language drop-down at the bottom of any page and choose the language in which you want notifications to be sent.
- (If you are using the default email template): Make any change in the template, e.g. add a blank space.
(If you are using a custom email template): Click Revert to default link at the bottom of the template. Your previous edits to the template will be lost. You can add them after you save the template in the new language. - Click Save.
Repeat these steps for all the email templates you want to change the language of. After that, customers will always get emails in the language that you set.
You can send email notifications to customers in different languages. To send emails in multiple languages, use the default email templates and enable several languages for your storefront in your store admin, go to Setting → General → Regional Settings → Store Language. Click Language settings → Add new languages. Enable several languages here and translate your catalog. Customers will get email notifications in the same language in which they view your storefront.
Translating email notifications into a new language
Email templates are translated into 15 languages. If you don’t see the language that you want to use for emails, you can add your own custom translation for mail notifications.
To translate mail notifications into a new language:
- From your store admin, go to Settings → Mail.
- Click Edit next to the notification that you want to translate.
- Translate the plain text that you see in black to the desired language.
- Add translations for order statuses. These are set by variables in the email template. Find the following variables:
Order payment statuses:
${order.paymentStatus}
Order fulfillment statuses:
${order.fulfillmentStatus} - Replace them with the following translation code where you add your translation. Here is an example of the code for translation into Portuguese:
Order payment statuses:
<#if order.paymentStatus = 'Paid'> Pago
<#elseif order.paymentStatus = 'Awaiting Payment'> Aguardando Pagamento
<#elseif order.paymentStatus = 'Cancelled'> Cancelado
<#elseif order.paymentStatus = 'Refunded'> Reembolsado
</#if>
Order fulfillment statuses:
<#if order.fulfillmentStatus = 'Processing'> Processando
<#elseif order.fulfillmentStatus = 'Awaiting processing'> Aguardando Processamento
<#elseif order.fulfillmentStatus = 'Shipped'> Enviado
<#elseif order.fulfillmentStatus = 'Delivered'> Entregue
<#elseif order.fulfillmentStatus = 'Will not deliver'> Não será entregue
<#elseif order.fulfillmentStatus = 'Returned'> Devolvido
</#if> - Save the changes.
After that, customers will get email notifications in the language that you’ve translated them into.
Comments
0 comments
Article is closed for comments.