Email templates: How to edit and manage it in Magento 2

magento_preview

Finding a perfect email template is the first step to send out exclusive emails. In this article we will give you a guide to edit and customize email templates in Magento 2.

To ensure that your emails will be displayed correctly on different devices, you need to follow certain rules above:

  • 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-toppadding-left and others;

  • Use background color instead of background images and add visual elements using the pixel 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:

magento 2 email 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 many 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 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.

magento 2 email templates edit

Then, click on Add New Template.

magento 2 templates - configuration in admin panel

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

magento 2 email configuration

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

sales emails magento 2

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.

new magento 2 template creation

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.

how to edit magento 2 email templates in admin panel

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.

magento 2 email templates configuration

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 Customize Magento 2 Email Templates?

Load the Template

In order to manage the transactional emails in Magento 2 go to Admin Panel > Marketing > Communications > Email Templates.

Magento 2 Transaction Email Template, Email Templates

Then, choose an email template you want to edit or you can add a new one by pressing the Add New Template button.

Magento 2 Transaction Email Template, Add New Template

When you are adding a new template, please choose an email template you want to base it on in the Template field and press Load Template button.

Fill in the Template Information

1. Set the name of the template in the Template Name field.

2. Change Template Subject and Content as you wish.

3. Add Template Styles (optional).

Magento 2 Transaction Email Template, Load Default Template  Magento 2 Transaction Email Templates, Template Content

Once you have finished with the configurations don’t forget to press the Save Template button.

Assign Email Template

If you have created a new template you need to assign it in the store configurations. As far as we have created a New Order Template in this guide we go Admin Panel > Stores >Setting > Configuration > Sales > Sales Emails (your path can be different depending on the template).

Magento 2 Transaction Email Template, Configuration

Then you need to find a template select box you are interested in, remove the checkmark Use system value and choose the template from the list.

Magento 2 Transaction Email Template, New Order Confirmation Template

After all of the configurations have been performed press the Save Config button and flush Magento caches.

Finally, once you’ve created the email template and assigned it to the store configurations you need to customize the email logo.

In order to do this, go to Content > Design > Configuration and choose the configuration scope you want to customize the email logo for.

Magento 2 Content Design Configuration

After that, move to the Transactional Emails section and fill out the following fields.

  • Upload the Logo Image or Select from the Gallery of already uploaded images.
  • Set the Logo Image Alt.

Magento 2 Transactional Email Templates Design

  • Enter the Logo Width and HeightNote: it is necessary that you set these characteristics if you uploaded the logo and not selected it from the gallery.
  • Choose the Header and Footer Templates.

Magento 2 Transactional Logo Design

  • Once more, don’t forget to Save Configuration when you finish.

In short, if you want to customize email templates in Magento 2 you need to take the following steps:

1st  Step: go to Marketing > Email Templates in order to edit or add a new email template.
2nd Step: go to  Stores > Configuration > XYZ, find your template select box and change its value.
3nd Step: go to Content > Design > Configuration to customize the email logo.

Managing a global-scope website you need to create the language environment for the customers to feel comfortable in and communicate with them in their own language. This increases your credibility and improves their experience in your store.

Level up your website with ArrowHiTech – official partner of Magento

Our own Magento development services is plus the option for monthly support packages. It is to make sure your online business always remains in top form. And of course, there are countless other developer websites that can be easily found and perused as well, especially push your Magento 2 site speed.

Capture

ArrowHiTech Development Agency

Our Magento 2 Products:

Capture

Magento 2 Theme collection on themeforest.net

Capture

Some extensions of Magento 2 extensions collection on magesolution.com

356 Total Views 1 Views Today