Now that you've changed the logo used in Magento's transactional e-mail templates, you may also want to change your e-mail template's color scheme.
Navigate to System | Transactional Emails, and click on the Add New Template button at the top-right corner of the screen, as shown in the following screenshot:
From there, select an e-mail template you wish to overwrite; the following example uses the New Order template, which acts as the order confirmation e-mail template:
Click on the Load Template button, which will populate the panel below with the current contents of this e-mail template for you to alter. Firstly, populate the Template Name field as we're overwriting the New Order template. This will be New Order v2
, as shown in the following screenshot:
Next, in the Template Content field, you can overwrite any color references you need in the style
attributes within the e-mail template's HTML. Examine the first two lines of this field and you will see HTML that looks similar to the following code:
<body style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;"> <div style="background:#F6F6F6; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
To change the background color to a pale orange rather than the current light gray, you can make the changes in the code highlighted below:
<body style="background:#FFF1E3; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;"> <div style="background:#FFF1E3; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
If you now click on the Save Template button at the top-right corner of the screen, your changes will be saved. Your next task is to assign your new e-mail template to the New Order transaction in Magento.
You can also edit your theme's e-mail templates by providing e-mail template files in your theme. The base e-mail template files in Magento are located at /app/locale/en_US/template/email
. As with all core Magento files, do not edit these directly; copy them to your theme's locale
directory. In the example theme provided with this book, you can copy the e-mail templates into /app/design/frontend/default/m18/locale/en_US/template/email/
.
Navigate to System | Configuration and select the Sales Emails tab in the left-hand column. Expand the New Order panel and select your new e-mail template from the dropdown next to New Order Confirmation Template:
Click on the Save Config button at the top-right corner of the screen and resend the new order e-mail to see the changes to the template's background color appear:
You can overwrite other e-mail templates Magento sends in a similar fashion to fully customize your store.