Magento Community Edition, 1.9.x

Email Template Layout and Styles

Magento Community Edition has a set of responsive templates that define the header, body, and footer of all automated email messages that are sent from your store. The content, or body section, is combined with the header and footer to create each message. You can set up the header and footer one time, and then use them for every message.

Inline and Non-Inline Styles

Email templates are written in HTML, and are associated with the locale. The CSS files that provide the formatting instructions are stored separately, and reside on the server.

Many email clients do not support CSS formatting instructions that are stored separately from the email message. For this reason, the non_inline_styles variable has been added to the header of each message, to convert the external CSS styles to local, inline styles. The variable points to the CSS file on the server that provides the styles that are needed to format the template. The styles are then converted to inline styles, and copied to the <styles> tag of each message.

When you examine the header template code, you will find the markup tag with the non_inline_styles variable just after the <body> tag.  

  • <body>
    {{var non_inline_styles}}
    <!-- Begin wrapper table -->

When customizing transactional email templates from the Admin, you can enter any additional CSS styles that you need directly into the Template Styles box. They will be included when the non_inline_styles are converted.