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

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.

2 Answers 2


You can check the official documentation here : http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/templates/template-email.html

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.

  • 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). 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. 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. Jul 15, 2018 at 0:29

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

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.