4

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.

11

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! – Roy Jeurissen Jun 18 '17 at 8:05
  • Magento 2 already includes Emogrifier in an internal composer.json but use an old version (2015). – Franck Garnier Jun 20 '17 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. – Roy Jeurissen Jun 20 '17 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 '17 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 '18 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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