Jun 29

Create a New Email Template in Magento

Emails are a big part of the online world, so it follows that a professional ecommerce site should have professional email templates. A full-featured ecommerce solution is what you’ll find with Magento, an open source solution for selling products online. Magento provides a system to keep the more basic contact times with your visitors smooth and carefree. With open source comes great customization (and complexity).

This tutorial will guide you through the steps to create a new email template in Magento. Specifically, you’ll create the email that your visitors will receive when they sign up for your newsletter.

Requirements

• Access to your website’s Magento admin panel
• A little knowledge of how HTML emails work
• This tutorial

Step One: Create the Template

I said you need to know a little about how to create an HTML email, but since Magento comes with many templates you can kind of get away without the knowledge at first.

• Log into your admin panel and navigate to System > Transactional Emails.
• Click the ‘Add New Template’ button on the top right.
• Choose one of the default templates from the first drop down box.

In this tutorial we’ll be using the ‘Newsletter subscription confirmation’ template. This would typically be the first email your visitors would receive so I figured it would be a good choice. Choose the locale of course, then click the ‘Load Template’ button.

This will load the appropriate template which in this example is located in the /app/code/locale/en_US/template/email/ directory. The filename is ‘account_new_confirmation.html’. As you can see, it is very easy to alter the templates for international support. You can leave most of the template as they have presented it. I’ve changed the email addresses, the phone number, the store name and the source URL for the logo.

Back in the admin panel, give your template a name. To keep things simple, I’ve used ‘Newsletter Subscription Confirmation’ for the name and the subject. Now here’s where you can modify the template to suit your specific needs. One of the key features of Magento is the ability to have multiple stores within one installation. Therefore you can load the same template in the first half of this step, then modify it for each store in the second half.

Click the ‘Save Template’ button on the top right and you’ll see your new template in the list of Transactional Emails. Now lets move on to implementing it into your site.

Step Two: Using Your Template

From the top horizontal menu, navigate to System > Configuration.

Scroll down to the Customers section on the left menu and select Newsletter.

In the drop down box for Confirmation Email Template, choose the new template you just created. The option just above it should be set to Customer Support. Click the ‘Save Config’ button on the top right and you’re done.

Step Three: Testing Your Template

Now navigate to the public version of your site to the Newsletter box.

Type in your email and click ‘Subscribe’. Sync your email client and you should see a new email from ‘[Site Name] – Customer Support’ with the subject of ‘Newsletter subscription confirmation’.

Check all the text, make sure the logo shows up and the email addresses and phone number is correct. Make any changes back in the admin at System > Transactional Emails (second image in step one).

Conclusion

Magento Commerce, the open source ecommerce solution, can be very intimidating to those of us coming from Wordpress. Its configuration options are very intricate, allowing you to customize designs, layouts and almost every other piece of the site on a per-page basis. Hopefully I’ve shared some useful knowledge on how to create a new email template in Magento.

Make sure you test your emails extensively. They are acting as your host/hostess, concierge and valet. You want them to be as professional as possible. No typos, easily readable text, and please, be sure to quadruple check your email address and phone number.

A key nugget to remember about HTML emails is you have to put your CSS styling inline. You can’t reference an external CSS file or even have it in the HEAD. All HTML emails are contained within the BODY tag. Also, don’t even try using DIVs for your layout. Go old school. Bring out the TABLE tag and party like its 1999. Just look at the example templates they have to get a feel of what is or isn’t acceptable. If there’s enough interest, I’ll write a post on my experience with HTML emails.

I will be adding more quick tutorials like this for Magento as I wade through their user guide and forum. Please feel free to comment or ask a question in the form below.