Customize Email Templates in Magento 2

Dec 13, 20181769
Customize Email Templates in Magento 2

Emails are an integral part of an online shop’s marketing strategy and branding, which makes creation and customization of an email template a rather hot topic in ecommerce. In this article I will analyze the various options for how to customize Magento 2.3.0 letter templates.


How to create html email templates in Magento 2
How to modify letter templates in Magento 2
How to create a template from admin panel
How to create a custom email template programmatically
How to modify dynamic data in Magento 2 email templates

How to create html email templates in Magento 2

First and foremost, bear in mind the recipient can open your letter at any device and application. Therefore, it is extremely important to ensure maximum compatibility of the letter to make it all monitor size- and resolution-friendly.

There are several basic rules you need to follow to create a universally compatible letter:

  • Use table design for letter templates
  • Write all tag styles inline.
  • Some mail clients add their own styles and spaces, so it’s better to reset it beforehand. Use this: <table border = “0” cellpadding = “0” cellspacing = “0” style = “margin: 0; padding: 0”>
  • Use (HEX) format in lower case to set color. Not all email clients will read the #CDCDCD, so #cdcdcd is safer in this case.
  • Apply fonts from the default sets that most devices have. You can find all supported fonts here: https://www.w3schools.com/cssref/css_websafe_fonts.asp  If you want to add a unique touch to your letter, better add a picture to the template instead of fonts.
  • Use images for the background.
  • Specify image size and prescribe the display property; otherwise some devices may render them incorrectly.

These basic rules will help cover a wide range of devices and email clients.

How to modify letter templates in Magento 2

In Magento 2 email templates are located in the folders module_directory / view / frontend / email / in * .html extension. For example, in the basic magento_customer module you can find the following templates.

default email templates in Magento 2

 

You can’t modify templates in the vendor folder – instead, you’ll need to create a new template. There are various ways to do it. Let’s take one of the standard templates and customize them.

You can configure with the template at the admin panel or create it in a folder. But keep in mind that templates created through the admin panel have priority over templates created by hand.

How to create a template from admin panel

Go to MARKETING> Communications> Email Templates. Find a large Add template button in the right corner and click it.

Now let’s begin creating a template. We will base ours on the existing account_new_confirmed, you can find it in the customer templates drop-down list. After selecting the template, press load template.

Now you can configure it. Give the template a name and set the subject of your future letter. You can insert different variables in the body and header of the letter. I will describe how to do this below.

Modify email template in magento2

How to create a custom email template programmatically

To add your template you need to create a template file with the exact same name as in the vendor and place it in the app / design / frontend / {Vendorname} / {themename} / {Vendor_ModuleName} / email directory.

By default, we have the Magento Luma theme, and for it overriding the email template will not work. We need to create our own theme and then redefine the template.

In our case, the full path would be: app / design / frontend / Belvg / simple / Magento_Customer} / email.

Inside the template, you can set the theme and variables of the template. This is done simply by using comments at the beginning of the template. This data is loaded into the admin panel by clicking Load Template.

For the title of the letter we insert the following comment, using @subject to directly indicate the subject of the letter.

To add template-specific variables, you need to insert a comment with the keyword <! – @ vars @ -> in the beginning of the template. In the format on the left, the value is specified with var keyword, on the right the variable name is as it will be in the admin panel.

After you completed all the steps, your new template will appear in the admin panel, in the place you specified; in our case it is Magento_Customer. Now we can take this template as a basis and create new templates further.

How to modify dynamic data in Magento 2 email templates

Let’s consider the situation when you need to change the domain of your store or add domains for other countries, and you have an email template with a link to important news.

If you add this link as an html tag, it will definitely work, but in case you will need to move to another domain, you will have to change this link by hand in all the templates; and if you have more than a hundred, this would be a rather hard task.

Email templates support directives and variables. The directive is embedded in the template with two curly braces, opening and closing one.

A link to the current store can be added via the store directive. In you leave the url value empty, then the address of the current store will be automatically filled in.

The var directive is used to insert template variables. You can also use object properties and methods.

Bear in mind that everything depends on the type of template and what objects the template contains. If the template contains the object, then the corresponding methods and properties will be addressed.

Translation directive is a very important one. It is recommended to enclose any text from the template in this directive.

Variables are inserted into the translation string with the % sign and specified variable name.

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

The template directive allows to include other templates in the letter. It is often used to format header and footer in one style. The path to the template is set using the config_path attribute.

magento development services

Magento Development Services

Take your online store to the next level with BelVG Magento development

Click to visit the page

We can also include an additional block in the letter template using the block directive. This directive will unpack the html from the block.

Moreover, you can add a block created inside the CMS. Such blocks are created in the admin panel in the Content -> Blocks section.

All you have to do is to add to the block directive the identifier from your blog, which can be found in the admin panel. For example, this is how you insert a block with information about the company:

Sometimes you may need to add a whole layout. This can be done with a layout directive.

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

The config directive retrieves values from a table using the path column.

There are two directives for inserting styles: 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 insert styles from a variable with an additional modifier raw. It allows you not to screen html-tags and css, but to insert as it is.

But the inlinecss directive unpacks styles and places them inside the inline tags, as the name suggests.

I’m certain that this set of practices and directives described above will be enough to perform maximum customization for all sorts of devices and email applications. If you have any questions left, please leave them in the comments – we’ll be happy to answer them.

Turn to BelVG for professional Magento development. Our experienced team will realize your dreams and expectations about your future Magento webstore.


Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Andrey

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *