Changing the color scheme of your Magento transaction e-mail templates

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.

Loading a Magento e-mail template

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:

Loading a Magento e-mail template

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:

Loading a Magento 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:

Loading a Magento e-mail template

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.

Editing Magento e-mail templates through your theme

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/.

Assigning an e-mail template to a transaction in Magento

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:

Assigning an e-mail template to a transaction in Magento

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:

Assigning an e-mail template to a transaction in Magento

You can overwrite other e-mail templates Magento sends in a similar fashion to fully customize your store.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset