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

by

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

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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.

Method 2

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment