Magento – Custom Email Template in Magento2

cssemailmagento2template

I'm trying to create a custom email template.

I have loaded header and I want to start styling it. For example a simple red background color.

Where do I need to add the style? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
    {{var template_styles|raw}}

    {{css file="css/email.css"}}
</style>
</head>
<body>
{{inlinecss file="css/email-inline.css"}}

<!-- Begin wrapper table -->
 <table class="wrapper" width="100%">
<tr>
    <td class="wrapper-inner" align="center">
        <table class="main" align="center">
            <tr>
                <td class="header">
                    <a class="logo" href="{{store url=""}}">
                        <img
                            {{if logo_width}}
                                width="{{var logo_width}}"
                            {{else}}
                                width="180"
                            {{/if}}

                            {{if logo_height}}
                                height="{{var logo_height}}"
                            {{else}}
                                height="52"
                            {{/if}}

                            src="{{var logo_url}}"
                            alt="{{var logo_alt}}"
                            border="0"
                        />
                    </a>
                </td>
            </tr>
            <tr>
                <td class="main-content">
                <!-- Begin Content -->

Best Answer

The way to create a custom template in magento 2 :

Create a module in code :

app/code//<Module_Name>

Add the registration.php, README.mk and etc/module.xml files.

Create config file

In app/code/<Vendor>/<Module_Name>/etc add a config.xml file :

app/code//<Module_Name>/etc/config.xml :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <custom>
            <email>
                <signature_template>custom_email_signature_template</signature_template>
            </email>
        </custom>
    </default>
</config>

Create template declaration

In app/code/<Vendor>/<Module_Name>/etc add a email_template.xml file :

app/code/<Vendor>/<Module_Name>/etc/email_template.xml :

Here, I use Magento_Email

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Email:etc/email_templates.xsd">
    <template id="custom_email_signature_template" label="Signature" file="signature.html" type="html" module="Magento_Email" area="frontend"/>
</config>

Create html template (in the module your need it, for example Magento_email)

In app/design/<Vendor>/<theme>/Magento_email/email/ add a signature.html file ex in Magento_Email:

app/design///<Magento_email>/email/signature.html :

Put the HTML you what in.

Use it

Now, you can call it in in your email :

{{template config_path="custom/email/signature_template"}}
Related Topic