Magento Email Templates

Sep 28, 2017 | 6 comments

How to setup Magento eMail Templates for M2

When a customer makes a purchase, or changes their password, they are automatically sent an eMail from your Magento store. It’s important that merchants update these triggered and transactional template eMails to match their brand. Notably, Magento makes it easy to customize these types of eMail templates to match the design of your website for branding purposes. In addition, merchants can also create eMail templates for different store views for different languages or sub-stores within Magento.

The process for updating Magento templates is fairly simple. The admin between Magento 1 and Magento 2 is laid out differently, but the steps are essentially the same for updating eMail templates. This also applies to both versions of Magento Open Source (previously referred to as Community Edition) and Magento Commerce (previously referred to as Enterprise Edition).

1. Creating Custom eMail Templates – Getting Started

To access the transactional eMail section go to MARKETING > Communications > eMail Templates

If you’ve never set up an eMail before, it will be an empty pane to start with. See below:
Click on “Add New Template” in the top right hand corner. You’ll come to the form with the ability to load any default templates. See below:
Magento has it’s own default template for all of the different transactions that get sent out to the customer. This also includes any 3rd party extensions installed that generate customer correspondence such as RAM modules or order management modules.

The drop down box shows all of the default Magento templates available. Notably, all of the templates will utilize your store logo and have quite a few dynamic variables. Out of the box, nothing is hard coded to say Magento. At InteractOne, we really emphasise creating a consistent branding experience across our merchant’s sites and eMail communication. And in some cases, we will simplify the eMail templates to display properly on mobile.

As shown above, there are many template options such as “New Order,” “New Credit Memo,” as well as a “For Guest” options. Templates that do not note “for guests” are intended for registered users. See below:

The difference is that the template inserts the customer’s name and account information for registered users only vs the “for guest” option which omits that information.

So select the template you wish to edit and click load template.

Special Tip: Load a template eMail to view the HTML code to use as a guide for eMails you’re trying to create. This is helpful when you need an example of code but do not need to edit a full template eMail.

After the template has loaded, give it a name and add a subject line. You can create anything you want, or stick to something simple. The default is usually simple and includes with your store name. See below:

2. Creating Custom eMail Templates – Let’s talk about variables

You’ll notice that there are several variables available throughout the template. These are dynamic variables that will pull settings from your magento configuration into the content of the eMail. For example, these could be the subject line or the body. The store prefix is a store view level prefix, meaning you can give your website a different name on the store level. Or, you can have different settings for your order increment ids, phone, or address based on the store view level. Those examples can be dynamically inserted into the template. See below:

The “Insert Variable” button will list the variables that can be inserted into the subject and content sections. In other words, these are dynamically inserted based on transaction information. This could include customer or order information and any other kind of configuration settings that are set on your store.
Special Tip: To insert a variable, your cursor needs to be in the place where the variable needs to go. Furthermore, if you insert a variable, it’s your responsibility to check that the variable is displaying properly!

3. Creating Custom eMail Templates – Mobile Friendly eMail.

A popular request among merchants is to create a responsive or mobile friendly eMail. Notice the templates use table settings which by nature are not mobile responsive or mobile friendly.

Editing eMail layouts and header/footer color schemes to match store designs are popular ways of customizing Magento eMail templates. The pre-defined eMail variables are managed by layout XML files located in the template directory. Due to this, we do NOT recommend editing those files directly. This can cause issues when updating Magento in the future.

Special Tip: It’s best to have a developer create an overwrite to the existing layout files if you want to change anything in those sections. Any further directions on how to actually edit those would need to come from an experienced developer.

4. Creating Custom eMail Templates – Template Styles

The Template Styles section is CSS and requires typical ID and class statements that can be built out in line. Editing or adding CSS to the Template Styles section will pull the styles into the Template Content section above.

5. Creating Custom Templates – Check Your Work

After your template is setup, save it. Once saved, you’ll be directed back out into the eMail Templates window where the new custom template will be available. See below:

There is a “Preview” option to the far right where the eMail can be reviewed in a new window.  Notably, the preview will not pull any dynamic data. Therefore, anything that has order number, bill to, or name will look empty. However, you can shrink the window down to see if the eMail is mobile responsive and that columns are stacking properly.

To apply the new eMail template, open a new tab, go to STORES > Settings > Configuration > SALES > Sales eMails.

For every section listed, you can define what template you want to use for each setting. Note that this a store view level setting. However, most merchants do not create Store View-specific eMail templates. You can change the default settings at the Default Configuration Scope level. To use different eMail templates at the Store View level, such as for different languages as shown in the example below. Click on “Default Config” in the upper left hand corner, and select the Store View you would like to edit.
The Store View settings in Magento can be pretty unclear. The most popular reasons for eMail settings being at the store view level is that merchants can setup different language eMails for different sites. For example, a merchant may have Spanish and French-specific sales and support. Therefore, they need to use a different phone number for the Spanish store view and the French store view. In addition, they can also have custom eMail templates specific to the store views. It’s a great feature, however, most merchants will not need multiple store view options.
Special Tip: Test your eMail by completing a test action to trigger the eMail to come to yourself. Test the eMail from different devices such as mobile, tablet or desktop to verify that the eMail displays properly.

Need help with Magento eMail Templates?

In addition to our tutorial above, Magento offers excellent documentation on editing eMail templates. Magento offers even more detail including how to edit headers and footers. However, if you don’t feel Magento savvy or don’t have time to customize your eMail templates, we can help! Contact us today to talk to a Magento expert about Magento eMail templates or give us a call 513-469-3345.

6 Comments

  1. James
    James on March 26, 2010 at 2:05 am

    I’m still starting out on Magento and I need all of these useful tips that I can find. Great tips, I appreciate you posting it. It’s a bg help for me. =D
    .-= James´s last blog ..Bästa VPS =-.

  2. Dave@Betway Casino
    Dave@Betway Casino on July 13, 2010 at 11:09 pm

    Hi,

    great stuff, but I can’t get mine to work. It will not load the customized templates. Don’t know what I am doing wrong. Please help!

    • Nabil
      Nabil on August 4, 2011 at 10:33 am

      Hey Dave, I’m from Sweden as well — care to explain what’s going wrong?

      I’d love to help you out 😉

  3. Cheap Web Hosting
    Cheap Web Hosting on July 23, 2010 at 10:44 am

    Thank you for this article. Web Hosting can be quite difficult to choose if you’re trying to find a new web host. It could also be difficult even when you do have a hosting company as problems can still occur in the long term, such as with uptime issues or customer service problems. That is why choosing the right hosting company is important, so you don’t face issues in the long term.

Submit a Comment