I am using Magento 1.9.1. I want to customize my Magento Transactional Emails. To do so, I duplicated email-inline.css and email-non-inline.css from base package into my customized package (into this path: \skin\frontend\mypackage\default\css ).

I made the necessary changes and I uploaded the updated css but the emails arrive with the same design as before, as if the system was unaware of my custom css.

What do I have to do?

  • Which files did you copy where? Jul 10, 2015 at 12:25
  • Have you fixed this? I'm having this same problem.
    – nano
    Apr 5, 2016 at 8:34

3 Answers 3


Here's one thing you could try.

NOTE: This will only work for email templates that include use the {{var non_inline_styles}} variable.

  1. Create a file called email-custom.css and add all the custom <CSS> that you need
  2. Upload this file to skin/frontend/YOURPACKAGE/YOURTHEME/css/
  3. In your Admin Panel go to System > Configuration > General > Design > Transactional Emails and add the email-custom.css file to the Non-inline CSS File(s) field like in the image below (using commas to seperate files)
  4. Save config and flush all cache

Magento Transactional Email Custom CSS


What i did was adding {{var non_inline_styles}} on template content and then i added all my styles on the template styles.enter image description here



refer this for both non-inline and inline CSS for mobile templates.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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