How to Edit Magento 2 Email Templates

Want to send out exclusive emails? First, you need to find a perfect email template. In this article you will learn everything you need to know about email templates in Magento 2. We will discuss dynamic data, internal files of a template, what you can do in the admin panel and how to create a new one with a theme.

What do you need to know about Magento 2 email template layout?
How to edit Magento 2 email templates
How to edit dynamic data in Magento 2 email templates
How to edit Magento 2 email templates in admin panel
How to edit the files of Magento 2 email templates
How to create a new email template in admin panel
How to create a new email template with a theme

What do you need to know about Magento 2 email template layout?

If you want to create an email template, one of the first things that you should keep in mind is that a user can open your email with any app or device. Different applications use different engines for email rendering.

Mail clients can add their own styles besides those that were initially chosen by a developer for email distribution. A large variety of mail clients and render engines makes it necessary for us to opt for a one-size-fits-all approach. To ensure that your emails will be displayed correctly on different devices, you need to follow certain rules. Here are some of them:

• Use table-layout (<table> instead of <div>);
• Do not shorten the HEX codes for colors (#FFFFFF instead of #FFF);
• Use CSS2 properties instead of CSS3;
• Use HTML4 instead of HTML 5;
• Use background-color instead of background.You should also use the extended properties like padding-top, padding-left and others;
• Use background color instead of background images and add visual elements using the tag;
• Use the HTML attributes instead of CSS;
• Add inline CSS styles in your layout;
• Use standard system fonts for email content display.

How to edit Magento 2 email templates

In Magento 2, email templates are stored at <module_dir> / view / <area> / email catalogs of the appropriate modules. For example, in the basic module Magento_Customer, you can find the following templates:

 

 

It is not recommended to change Magento 2 standard files. Instead, you’d better create your own templates. In order to do it, you can create necessary files in your theme or with the help of Magento Admin.

In most of the cases, email templates consist of the same components. For example, a company’s logo, contact information and some other elements can be placed at the top. Phone numbers, social links or others can be placed at the bottom. On the other hand, the place where you put the most significant email’s content is not static. It depends on a template that you use. It is the reason why Magento 2 email templates consist of 3 parts: Header, Content, Footer.

By default, header and footer can located in the following files:

• /view/frontend/email/header.html
• /view/frontend/email/footer.html

How to edit dynamic data in Magento 2 email templates

Let’s say that you need to add the link to your store’s domain to an email template.

If you add this link as a simple HTML tag, it will definitely work. But, there is a tricky part – in case you need to switch to another domain later, you will have to change this link manually in all the templates (if you have more than a hundred of them, it is going to be quite a challenge).

For such tasks, Magento 2 email templates support directives and variables. A directive is inserted in a template with two curly braces opening and closing one.

Let’s take a look at some of them:

The link to the current store can be added via a directive store. If you leave the url value empty, then, the address of a current store will be filled automatically.

{{store url = ""}}

The var directive is used to insert variables of a template.

{{var customer.name}}

If a template contains the object, you can use appropriate methods and properties.

{{var $ order.getStatusLable ()}}

Directive of a template allows adding other templates to the letter. It is often used to format header and footer in the same style. The path to a template is applied with the help of config_path attribute.

{{template config_path = "design / email / header_template"}}

If you need to display basic static content, then it is necessary to use translation of trans directive.

{{trans "Example string"}}

To add an image link to the corresponding image, use the media directive. It extracts the path to the file from the media folder.

{{media url = "/pathToImage/img.jpg"}}

To add styles, there are 2 directives: css and inlinecss. The css directive extracts css from a file, so you need to add the <style> </ style> tag to it. You can also add styles from a variable with extra modificator raw. It allows you not to look through the HTML tags and CSS and just insert them.

The inlinecss directive unpacks styles and places them inside of inline tags as appears from the name:

{{inlinecss file = "css / filename.css"}}

How to edit Magento 2 email templates in admin panel

To create or edit Magento 2 email template via admin panel, you should proceed to Admin Panel -> Marketing -> Email Templates.

 

 

You will see the existing Magento 2 templates. To edit them, you just need to choose the one that you want to edit. You can also create a new template by clicking on Add new template (for details, see section 6).

On the page where you edit a template, you can change the template’s name as well as the email subject line. Then, in the Template Content field, you can edit the content of your template (do not forget to use table layout and HTML4 tags). In the Template Styles field, you can write CSS for your template.

Also, in the layout of email templates, Magento 2 allows access to variables. To add a variable to your template, you should press Insert Variable and then choose the necessary variable in the pop-up.

 

You can also upload header and footer to your email content templates. For example:

Directives {{template config_path="design/email/header_template"}} and {{template config_path="design/email/header_template"}} connect header and footer templates.

To save a template, you need to press Save Template.

How to edit the files of Magento 2 email templates

To edit an email template, you need to open a file with this template. For example, let’s open the account_new.html file in the Magento_Customer module.

 

 

You can see that the structure is similar to editing a template with the help of the admin panel. Email’s subject in this case is transferred to the @subject directive.

How to create a new email template in admin panel

To create a new template, you need to go to the Admin Panel -> Marketing -> Email Templates section.

 

 

Then, click on Add New Template.

 

 

In the Template Name field, you need to enter the name for template identification in the Magento admin panel.

In the Template Subject field, you should add simple text that will be used as a subject for emails created with your template. This field may contain system variables.

In the Template Content field, you create content for your letter. You can also use system variables in this field. When creating content, you should try to follow the rules listed in section 1.

The Template Styles field is not obligatory to use, here you can add CSS styles to a template. These styles can be added inside a <style> tag in the <head>of a letter.

After you have filled in the data, click on Save Template. Now, you have a new template which is not used anywhere. To apply this template, you need to do the following:

1. Click on Stores > Settings > Configuration

 

 

2. Then, in the Sales section, you need to select Sales Emails.

 

 

3. Now, you need to select the section where you want to apply your new template. For example, you have created an email template for new orders. Then, proceed to the Order section and in the New Order Confirmation Template field, you should select your new template and click on Save Config.

 

How to create a new email template with a theme

First, you need to proceed to a folder with the module that you want to create a new email template to. Then, in the etc folder of your module, you should create an email_templates.xml file. This file will contain configurations of your email template.

 

 

The node contains the configuration that we are interested in.
id is a unique template identifier.
file is the path to the file that contains the template.
type is a type of email (text or html).
area is the area of application.
The template gets a unique identifier with id attribute, simple mark, file that contains an email template’s path, type of email, text or html and area.
You can create a few templates for every module.

 

 

The files of email templates are located at the catalog of your module.

To apply the template that you have created, you need to open the Admin Panel and go to Marketing -> Email Templates. Click on Add new Template and in the Load default template section, choose the template that you have created. After that, press Load Template.