Magento 2: Override/extend the email.css that is being used in the transactional email header

Question

When adding a new email header template i see the following bit of code:

   <style type="text/css">
        {{var template_styles|raw}}

        {{css file="css/email.css"}}
    </style>

Is there a way to override/extend this css/email.css file? I want to style email templates, but I don't know where to start.

Rama Chandran M · Accepted Answer · 2018-09-26 15:07:21Z

22

The general steps :

Create a Magento 2 frontend theme
Upload your custom logo here : app/design/frontend/Vendor/Theme/Magento_Email/web/logo_email.png
Edit the header and footer parts here : app/design/frontend/Vendor/Theme/Magento_Email/email/header.html and app/design/frontend/Vendor/Theme/Magento_Email/email/footer.html
Edit the sales email templates for example here : app/design/frontend/Vendor/Theme/Magento_Sales/email/order_new.html
Add your custom styles here for common emails : app/design/frontend/Vendor/Theme/web/css/source/_email-extend.less
Add your custom less variables here for common emails : app/design/frontend/Vendor/Theme/web/css/source/_email-variables.less
Add your custom styles here for sales emails : app/design/frontend/Vendor/Theme/Magento_Sales/web/css/source/_email.less

And the final step is to upgrade the Magento 2 Emogrifier library in order to fix bugs with inline css generation.

Update your root composer.json and add this require line :

"pelago/emogrifier": "1.2.0 as 0.1.1"

Then do a composer update and your mail css should be working.

Rama Chandran M

3,21013 gold badges21 silver badges38 bronze badges

answered Jun 16, 2017 at 14:19

Franck Garnier

2,9361 gold badge16 silver badges35 bronze badges

Thank you so much for your answer. Adding the emogrifier package did the trick! Somehow my project didn't even had it at all!
– Prometheus
Jun 18, 2017 at 8:05
Magento 2 already includes Emogrifier in an internal composer.json but use an old version (2015).
– Franck Garnier
Jun 20, 2017 at 7:12
Hi Frank, You are absolutely right. After some research came to the conclusion that it wasnt even emogrifier, but it had to do something with it. Somehow emogrifier breaks when my project is in developer/production mode. So i did a set mode to developer first then back to production then it worked.
– Prometheus
Jun 20, 2017 at 10:25
Yes it works in developer mode without this workaround. Problem with the minification in production mode. Has been fixed in recent Emogrifier release.
– Franck Garnier
Jun 20, 2017 at 11:12
Thank you. A very helpful answer. It's much easier after knowing where to place each file. I don't know why I keep getting stuck at stuff where knowing the location of the file is the solution.
– Mohammed Joraid
Jul 15, 2018 at 0:29

| Show 1 more comment

w2b · Accepted Answer · 2021-02-09 11:19:48Z

The exact path where magento2 search for css is:

for not inline styles: app/design/frontend/your_vendor_name/your_theme_name/web/css/email.css
for inline styles: app/design/frontend/your_vendor_name/your_theme_name/web/css/email-inline.css

You don't need to compile anything. Its enough to put your files in locations above.

To change html from default header or footer you need to put those files in:

header: app/design/frontend/your_vendor_name/your_theme_name/Magento_Email/email/header.html
footer: app/design/frontend/your_vendor_name/your_theme_name/Magento_Email/email/footer.html

2 Answers 2