Custom Email Template in Magento2

Question

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 -->

i am facing same issue magento.stackexchange.com/questions/134160/… — Pratik, Commented Sep 1, 2016 at 6:07

Community · Accepted Answer · 2022-03-23 05:01:15Z

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 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">
    <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_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"/>
</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"}}

HI, I get this error message: Error filtering template: Email template 'custom_email_signature_template' is not defined. Would you happen to know why? — crashtestxxx, Commented Jan 7, 2019 at 0:20

Laurent Khoudja · Accepted Answer · 2018-09-09 12:52:14Z

1

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

answered Sep 9, 2018 at 12:52

Laurent Khoudja

3342 silver badges6 bronze badges

Add a comment |

Joel Davey · Accepted Answer · 2019-04-01 08:50:20Z

1

The best place to add your styles is in

app/design/frontend/YourVendor/YourTheme/web/css/source/_email-extend.less

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

answered Apr 1, 2019 at 8:50

Joel Davey

6805 silver badges14 bronze badges

Add a comment |

GEG · Accepted Answer · 2016-09-01 05:53:33Z

0

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

answered Sep 1, 2016 at 5:53

GEG

113 bronze badges

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

Add a comment |

Rafael Corrêa Gomes · Accepted Answer · 2017-04-08 04:50:51Z

0

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:

Magento_Luma_theme_dir/web/css/email-inline.less

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.

edited Apr 8, 2017 at 4:50

Rafael Corrêa Gomes

13.6k14 gold badges89 silver badges178 bronze badges

answered Sep 1, 2016 at 12:31

GEG

113 bronze badges

This mechanism only working in theme base not module base when you put css in custom module it's not working.
– Pratik
Commented 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
Commented 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
Commented Sep 2, 2016 at 5:45

Add a comment |

Milan Maniya · Accepted Answer · 2022-05-06 10:40:42Z

- Create the Config file

app/code/Vendor/ModuleName/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>
                <footer_unsubscribe_mail>footer_unsubscribe</footer_unsubscribe_mail>
            </email>
        </custom>
    </default>
</config>

- Create Email Template Declaration

app/code/Vendor/ModuleName/etc/email_templates.xml

<?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"/>
</config>

- Create HTML Template

app/code/Vendor/ModuleName/view/frontend/email/footer-unsubscribe.html

- You can call it in your email template

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

Stack Exchange Network

Custom Email Template in Magento2

6 Answers 6

The way to create a custom template in magento 2 :

Create the config file

Create template declaration

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

Use it

Your Answer

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

Linked

Hot Network Questions

Custom Email Template in Magento2

6 Answers 6

The way to create a custom template in magento 2 :

Create the config file

Create template declaration

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

Use it

Your Answer

Sign up or log in

Post as a guest

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

Linked

Related

Hot Network Questions

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