Creating Custom Email Templates in Magento 2

22nd August 2017

Magento comes with a predefined set of email templates that a merchant can use to send emails, such as transactional and customer account related emails to customers. Creating Custom Email Templates in Magento 2 requires configuration and customisations made in a module.

Presuming you have already created the relevant module structure by creating a Magento 2 module, start by creating a email_templates.xml file within your module’s etc directory. This will contain the email template configuration.

// app/code/[Vendor]/[Module]/etc/email_templates.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Email:etc/email_templates.xsd">
    <template id="custom_template" label="Custom Template" file="custom_template.html" type="html" module="[Vendor]_[Module]" area="frontend"/>
</config>

The <template> node holds the configuration we’re interested in. The template is given a unique identifier with an id attribute, a customary label, a file that contains the location of the email template, the type of email, either text or html and the area.

Any emails that involve communication with the customer should have the frontend area configured. Examples of adminhtml email templates include cron warnings and payment failed emails that are emailed to the merchant.

Email template files belong in your module’s view/[area]/email directory, where [area] is replaced with the area value added within the email_templates.xml file.

// app/code/[Vendor/[Module]/view/frontend/email/custom_template.html

<!--@subject Email Subject @-->
<!--@vars
{"store url=\"\"":"Store Url",
"skin url=\"images/logo_email.gif\" _area='frontend'":"Email Logo Image"}
@-->
<!--@styles
body,td { color:#2f2f2f; font:11px/1.35em Verdana, Arial, Helvetica, sans-serif; }
@-->
{{template config_path="design/email/header_template"}}
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
            <td align="center" valign="top" style="padding:20px 0 20px 0">
                <table bgcolor="#FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:1px solid #E0E0E0;">
                    <tr>
                        <td valign="top">
                            <h1 style="font-size:22px;font-weight:normal;line-height:22px;margin:0 0 11px 0;">{{trans "Hello"}},</h1>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table cellspacing="0" cellpadding="0" border="0" width="650">
                                <tbody>
                                    <tr>
                                        <td colspan="2" valign="top" style="font-size:12px;padding:7px 9px 9px 9px;border:1px solid #EAEAEA;">
                                            {{trans "Your message"}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor="#EAEAEA" align="center" style="background:#EAEAEA;text-align:center;">
                            <p style="font-size:12px;margin:0;">
                                <strong>{{trans "Thank you"}}</strong>
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
{{template config_path="design/email/footer_template"}}

When logging into the admin panel and navigating to Marketing -> Email Templates, when clicking on Add New Template, you should be able to select your custom template from the Template dropdown.

You are now able to make amendments to the email templates within the admin panel.

Note: This article is based on Magento Open Source version 2.1.8.