Finding a perfect email template is the first step to send out exclusive emails. In this article, we will give you a guide to editing and customizing Magento email templates.
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-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 email templates
Magento 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 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 content is not static. It depends on the template that you use. It is the reason why Magento email templates consist of 3 parts: Header, Content, and Footer.
By default, the header and footer can be located in the following files:
- /view/frontend/email/header.html
- /view/frontend/email/footer.html
How to create a new email template in the 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 edit Magento email templates in the admin panel
To create or edit Magento 2 email template via the 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
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 email templates?
Load the Template
In order to manage the transactional emails in Magento 2 go to Admin Panel > Marketing > Communications > 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.
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).
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).
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.
After all of the configurations have been performed press the Save Config button and flush Magento caches.
Customize Email Logo
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.
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.
- Enter the Logo Width and Height. Note: 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.
- Once more, don’t forget to Save Configuration when you finish.
In short, if you want to customize Magento email templates 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.
Besides, if you are looking out for a cost effective Magento solution for your eCommerce store, then look nowhere other than Magesolution- Adobe Solution Partner . We not only offer a powerful solution for all size and budget but also ensure that it helps your online business grow and sustain. Contact us for a free consultation!
