Stack Exchange Network
Stack Exchange network consists of 181 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.
Visit Stack Exchange
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
Anybody can ask a question
The best answers are voted up and rise to the top
When adding a new email header template i see the following bit of code:
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.
asked Jun 15, 2017 at 11:13
36922 gold badges55 silver badges1818 bronze badges
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 :
- Edit the header and footer parts here :
- Edit the sales email templates for example here :
- Add your custom styles here for common emails :
- Add your custom less variables here for common emails :
- Add your custom styles here for sales emails :
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.
answered Jun 16, 2017 at 14:19
Franck GarnierFranck Garnier
2,93611 gold badge1616 silver badges3535 bronze badges
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
answered Feb 9, 2021 at 11:19