{"id":336,"date":"2020-02-23T07:13:16","date_gmt":"2020-02-23T07:13:16","guid":{"rendered":"https:\/\/www.magetrend.com\/blog\/?p=336"},"modified":"2023-11-19T14:41:01","modified_gmt":"2023-11-19T14:41:01","slug":"customize-magento2-email-templates","status":"publish","type":"post","link":"https:\/\/www.magetrend.com\/blog\/customize-magento2-email-templates\/","title":{"rendered":"How to Customize Magento 2 Email Templates"},"content":{"rendered":"\n<p>Emails are still the number one channel to communicate with your customer in 2020. Magento 2 is sending automated emails to inform the customers. Those emails are also known as transactional emails. It can be confirmation about new order, invoice, newsletter subscription and so on.  In total, there are 31 already prepared email templates in Magento 2. Unfortunately, they aren\u2019t perfect and you might need to customize them. <\/p>\n\n\n<div class=\"simple-container\"> <a class=\"simple-img\" href=\"https:\/\/www.magetrend.com\/magento-2-email-templates?utm_source=article&utm_medium=post_336&utm_campaign=pos2\"><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/prod\/magento-2-email-templates.png\" \/><\/a> <div class=\"simple-row simple-title\"><a href=\"https:\/\/www.magetrend.com\/magento-2-email-templates?utm_source=article&utm_medium=post_336&utm_campaign=pos2\">Responsive Emails Templates for Magento 2<\/a><\/div> <div class=\"simple-row simple-text\"><a href=\"https:\/\/www.magetrend.com\/magento-2-email-templates?utm_source=article&utm_medium=post_336&utm_campaign=pos2\">Our #1 bestseller. With user-friendly template editor!<\/a><\/div> <div class=\"simple-action\"><a href=\"https:\/\/www.magetrend.com\/magento-2-email-templates?utm_source=article&utm_medium=post_336&utm_campaign=pos2\">Read More<\/a> <\/div> <\/div>\n\n\n\n<p>Location, where you can manage Magento 2 email templates:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Marketing &gt; Communications &gt; Email Templates<\/strong><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1010\" height=\"564\" src=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates.png\" alt=\"\" class=\"wp-image-348\" srcset=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates.png 1010w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates-300x168.png 300w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates-768x429.png 768w\" sizes=\"(max-width: 1010px) 100vw, 1010px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step by step guide how to customize email templates<\/h2>\n\n\n\n<p>Magento 2 Email templates consist of two parts: html+css and variables. The variables are replaced to real data, when Magento prepares a template for sending. In other words, a variable is just a simple text like <strong>{{var customer_email}}<\/strong>, which will be replaced with a receiver email address.  <\/p>\n\n\n\n<p>Email template customizations consists of three steps:<\/p>\n\n\n\n<ol><li>  <a href=\"#load-default-email-template\">Load a default email template<\/a><\/li><li> <a href=\"#customize-template\">Customize email template <\/a><\/li><li> <a href=\"#update-configuration\">Update configuration <\/a><\/li><\/ol>\n\n\n\n<a name=\"load-default-email-template\"><\/a><h3>1. Load a default email template <\/h3>\n\n\n\n<p>First of all we need to create a new template and load Magento default template which we will customize. If you\u2019re ready, when go to: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Marketing &gt; Communications &gt; Email Templates &gt; Add New Template<\/strong><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1010\" height=\"564\" src=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates-1.png\" alt=\"\" class=\"wp-image-349\" srcset=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates-1.png 1010w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates-1-300x168.png 300w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-email-templates-1-768x429.png 768w\" sizes=\"(max-width: 1010px) 100vw, 1010px\" \/><\/figure><\/div>\n\n\n\n<p>Then, choose a template, which you want to customize. In my example, I will use the \u201cNew Order\u201d email template. After that click the \u201cLoad Template\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"985\" height=\"377\" src=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/load-magento-2-email-template.png\" alt=\"\" class=\"wp-image-350\" srcset=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/load-magento-2-email-template.png 985w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/load-magento-2-email-template-300x115.png 300w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/load-magento-2-email-template-768x294.png 768w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/figure><\/div>\n\n\n\n<a name=\"customize-template\"><\/a><h3>2. Customize email template<\/h3>\n\n\n\n<p class=\"has-text-align-left\">You will need to enter a unique email template name, before starting all customizations. It can be for example \u201cLuma New Order\u201d. <\/p>\n\n\n\n<p>In the form field \u201cTemplate Content\u201d all the magic will happen. I won\u2019t go very deep in the details about variables, if conditions, css and other things. Magento 2 has written a great <a rel=\"noreferrer noopener\" aria-label=\"article  (opens in a new tab)\" href=\"https:\/\/devdocs.magento.com\/guides\/v2.3\/frontend-dev-guide\/templates\/template-email.html\" target=\"_blank\">article<\/a> about it on their own documentation. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"523\" src=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/customize-magento-2-email-template-1.png\" alt=\"\" class=\"wp-image-353\" srcset=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/customize-magento-2-email-template-1.png 857w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/customize-magento-2-email-template-1-300x183.png 300w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/customize-magento-2-email-template-1-768x469.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/figure><\/div>\n\n\n\n<p>Unfortunately, Magento 2 hasn\u2019t wysiwyg editor for email templates. If you don\u2019t know or don\u2019t want to edit plain html, I would like to suggest our Magento 2 Email Templates extension. It has a user friendly editor, especially built for Magento 2 Email Templates. But about it a little bit later in this post.<\/p>\n\n\n\n<p>If you have changed what you want in email template content, then click the \u201cSave Template\u201d button and we will be ready for the last step.<\/p>\n\n\n\n<a name=\"update-configuration\"><\/a><h3>3.  Update  configuration <\/h3>\n\n\n\n<p>After we have created an email template, we need to update configuration and replace old template to the new one. In my example, I mentioned, that I will use the \u201cNew Order\u201d template. So in my case, I will have to navigate:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Stores &gt; Configuration &gt; Sales &gt; Sales Emails &gt; Order &gt; New Order Confirmation Template <\/strong><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"466\" src=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-sales-email-configuration.png\" alt=\"\" class=\"wp-image-355\" srcset=\"https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-sales-email-configuration.png 832w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-sales-email-configuration-300x168.png 300w, https:\/\/www.magetrend.com\/blog\/wp-content\/uploads\/2020\/02\/magento-2-sales-email-configuration-768x430.png 768w\" sizes=\"(max-width: 832px) 100vw, 832px\" \/><\/figure><\/div>\n\n\n\n<p>Magento path is depending on email template. You can always check the right configuration path in <a rel=\"noreferrer noopener\" aria-label=\"Magento 2 documentation (opens in a new tab)\" href=\"https:\/\/docs.magento.com\/m2\/ce\/user_guide\/marketing\/email-template-list.html\" target=\"_blank\">Magento 2 documentation<\/a>.<\/p>\n\n\n\n<p>If you have updated your configuration successfully, before testing, make sure a cache is cleaned. Otherwise, you will receive the same email template as before.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">User friendly email template editor for Magento 2<\/h2>\n\n\n\n<p>I already mentioned our <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.magetrend.com\/magento-2-email-templates\" target=\"_blank\">Magento 2 Email Templates<\/a> extension above, but I would like to couple more details about it. It&#8217;s a really helpful extension and can save tons of time. There are 31 email template in Magento 2 and to modify them all might be challenging.&nbsp;<\/p>\n\n\n\n<p>This <a rel=\"noreferrer noopener\" aria-label=\"Magento 2 Email Templates (opens in a new tab)\" href=\"https:\/\/www.magetrend.com\/magento-2-email-templates\" target=\"_blank\">Magento 2 Email Templates<\/a> extension has a user friendly email template editor. It lets you customize email templates in preview mode. One of the greatest things about it, is that it has a possibility to apply the changes for all templates at once. It saves time. Using this editor, you don\u2019t need to update colors, fonts, button colors, backgrounds, header, footer, etc for each template. Here is a short video about how this extension is working.<br><\/p>\n\n\n<div class=\"video-container\" id=\"nZYhlLp57GM\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<p>And the final piece for this article, as always troubleshooting tips. When we\u2019re talking about Magento 2 email templates, two problems are coming to my mind. Those are more often than others. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Email is not sent<\/h3>\n\n\n\n<p>If you aren\u2019t receiving emails from the Magento system there might be several reasons:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Reason #1 &#8211; cron is not working&nbsp;<\/h4>\n\n\n\n<p>If crontab is not configured properly or wasn&#8217;t at all, it can affect all sales email messages. My suggestion is to disable the following options and try to send email again. If a message is sent, then the problem is with a crontab.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Stores &gt; Configuration &gt; Sales &gt; Sales Emails &gt; General Settings &gt; Asynchronous sending <\/strong><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"> Reason #2 &#8211; An Error in email template<\/h4>\n\n\n\n<p>Email messages might not be sent because of some error. You can look for the errors in error logs, under this location in your server.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{MAGENTO_BASE_DIR}\/var\/log\/system.log<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>{MAGENTO_BASE_DIR}\/var\/log\/exception.log<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">  Reason #3 &#8211; Email communication is not working<\/h4>\n\n\n\n<p>If you have already checked issues above, then there is a chance that your server isn\u2019t sending emails using PHP mail() function and you don\u2019t have installed any SMTP extension. There are a bunch of SMTP extensions out there, just grab a free. It will do its job.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Email has \u201cCall to a member function on null\u201d error<\/h3>\n\n\n\n<p>It\u2019s one of more often problems, caused by misunderstanding how email templates are working in Magento 2. The functionality, which is using template, isn\u2019t passing a variable required by template. As an example, a \u201cNew Order\u201d template can\u2019t be used to send abandoned cart email messages. They both have items on email templates, but the way they gets data are different. Make sure all variables are passed by functionality which will use email template.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>If I were missing something, let me know in the comments below. I will be more than happy to append this article. That&#8217;s all for this post, fellows. Cheers!<\/p>\n\n\n<div class=\"simple-container\"> <a class=\"simple-img\" href=\"https:\/\/www.magetrend.com\/magento-2-pdf-invoice?utm_source=article&utm_medium=post_336&utm_campaign=pos1\"><img decoding=\"async\"  src=\"\/blog\/wp-content\/uploads\/prod\/magento-2-pdf-templates.png\" \/><\/a> <div class=\"simple-row simple-title\"><a href=\"https:\/\/www.magetrend.com\/magento-2-pdf-invoice?utm_source=article&utm_medium=post_336&utm_campaign=pos1\">The Most Popular PDF Designer for Magento 2<\/a><\/div> <div class=\"simple-row simple-text\"><a href=\"https:\/\/www.magetrend.com\/magento-2-pdf-invoice?utm_source=article&utm_medium=post_336&utm_campaign=pos1\">with user-friendly PDF editor to build your own PDF look<\/a><\/div> <div class=\"simple-action\"><a href=\"https:\/\/www.magetrend.com\/magento-2-pdf-invoice?utm_source=article&utm_medium=post_336&utm_campaign=pos1\">Read More<\/a> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Emails are still the number one channel to communicate with your customer in 2020. Magento 2 is sending automated emails to inform the customers. Those emails are also known as &hellip; <\/p>\n<div class=\"grid-footer\"><a href=\"https:\/\/www.magetrend.com\/blog\/customize-magento2-email-templates\/\" class=\"more-link\">Read More <i class=\"mticon-arrow\"><\/i><\/a><\/div>\n","protected":false},"author":1,"featured_media":357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/posts\/336"}],"collection":[{"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/comments?post=336"}],"version-history":[{"count":23,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/posts\/336\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/posts\/336\/revisions\/519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/media\/357"}],"wp:attachment":[{"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/media?parent=336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/categories?post=336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetrend.com\/blog\/wp-json\/wp\/v2\/tags?post=336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}