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">
<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"}}
{{inlinecss file="css/email-inline.css"}}

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

                            {{if logo_height}}
                                height="{{var logo_height}}"

                            src="{{var logo_url}}"
                            alt="{{var logo_alt}}"
                <td class="main-content">
                <!-- Begin Content -->

6 Answers 6


The way to create a custom template in magento 2 :

Create a module in code :


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

Create the 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">

Create template declaration

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

app/code/<Vendor>/<Module_Name>/etc/email_templates.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"/>

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"}}
  • 1
    HI, I get this error message: Error filtering template: Email template 'custom_email_signature_template' is not defined. Would you happen to know why? Jan 7, 2019 at 0:20
  • Does not work, I also get the filtering template error
    – Black
    Mar 15, 2021 at 11:11

All css for email are in app/design/frontend/Vendor/theme/web/css/source/_email-base.less


The best place to add your styles is in


As these styles will then be automatically inlined by Magento when sent.


Please refer the link for Styles for email templates: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/templates/template-email.html#email-styles

  • it's not working
    – Pratik
    Sep 1, 2016 at 6:18

Inline styles

The Magento_Email_module_dir/view/frontend/email/header.html file contains an inline CSS directive:

The inline CSS directive tells Magento which files to apply as inline styles on the email template.

{{inlinecss file="css/email-inline.css"}}

For example, let’s say an email is being sent from a store configured with the Magento Luma theme. The inlinecss directive first looks for a email-inline.less file in this file:


However because that file doesn’t exist, it will fall back to the Magento_Blank_theme_dir/web/css/email-inline.less file. The contents of that file will then be compiled and its contents are applied as inline styles to the email template.

  • This mechanism only working in theme base not module base when you put css in custom module it's not working.
    – Pratik
    Sep 1, 2016 at 13:12
  • Ok, are you using a custom theme? If so, did you try this files on the custom theme's css directory /web/css/email-inline.css @pratik
    – GEG
    Sep 2, 2016 at 5:07
  • yes i am using custom theme. yes i try to put css in my theme web folder but not luck.
    – Pratik
    Sep 2, 2016 at 5:45

- Create the Config file


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

- Create Email Template Declaration


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Email/etc/email_templates.xsd">
    <template id="footer_unsubscribe" label="Footer Unsubscribe" file="footer-unsubscribe.html" type="html" module="Vendor_ModuleName" area="frontend"/>

- Create HTML Template


- You can call it in your email template

{{template config_path="custom/email/footer_unsubscribe_mail"}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.