Thursday , November 21 2024
Home > Magezon Extensions > Email Builder Tutorials > How to Create New Order Email Templates With Magento 2 Email Builder

How to Create New Order Email Templates With Magento 2 Email Builder

How to Magento 2 new order email templates in Email Builder

Find your default Magento 2 email templates boring? Want to consolidate the new look for your online store right from your emails? Purchased Magento 2 Email Builder but do not know how to make the most of it?

This blog will answer all of these questions by giving you the instructions for creating a new order email template in Email Builder. Let’s get going!

I. What is the Magento New Order Email?

When it comes to new order emails, it’s easy to understand that the email’s purpose is to keep either customers or store owners informed about the placing of an order. Like almost all of the other email templates, Magento new order email contains the basic parts of an email which are template name, template subject and template content.

What is the Magento new order email

II. Steps to create Magento 2 new order email in Email Builder

Now we’ll go straight into how to create a new order email template in Email Builder. The process includes 4 steps as the following. 

1. Email Header

First of all, we need to create a header for the email template. What about an eye-catching image describing your product? So at the top of your template, add a new row and set its background image like below:

The first row settings

After creating a background, it’s important to insert a logo for the email header. Because the logo is just about ⅓ of the row, I’ll divide this row into 3 columns:

create a 3 column layout

Then in the column of your right-hand side, insert an element called Email Logo with the settings like this:

Insert email logo element

Concerning the Email Logo element in Email Builder, you can visit our older post to dig it deeper. 

Here is what our email heading looks on the front-end and back-end:

email header in back-end

Back-end

email header in front-end

Front-end

2. Email Menu

Because I want to make the rest of the email stands out from the header, I’ll create a new row after the header, then choose a background color for it:

second row settings

This section is to insert a menu of links to your pages. In this case, I’ll allow the menu to link to 3 pages that are a product page, Home page and About us page. In the Email Builder editor, add an Email Menu element, and see its settings below:

Email Menu general settings

Email Menu general settings

Email Menu menus settings

Email Menu menus settings

Here is what the menu link looks like in the back-end and front-end:

new order email templates in Email Builder - email menu in back-end

Back-end

new order email templates in Email Builder - email menu in front-end

Front-end

3. Email content: using Load Template and Variables

Next is the main content of our menu. We need to insert a Load Template element, choose “New Order” in the Templates field:

Load template element

Use the Variables field to insert any additional information you want:

Insert desired variables

Here is what Load Template looks like in the back-end and front-end:

new order email templates in Email Builder - Load template in back-end

Back-end

new order email templates in Email Builder - Load template in front-end

Front-end

The rest of the email will be like a footer containing social buttons, footer links and a copyright message. Insert after the Load Template element a Social Buttons element:

Social buttons general settings

Social Buttons general settings (the icon of socials need to be prepared beforehand)

Socials settings

Socials Settings (you can display your social icons vertically by choosing Bootstrap Column on the Display Types field)

Next, add a Footer Link element to link to any site you want. The settings are like this:

Footer Links general settings

Footer Links general settings

Footer Settings

Footer Settings

Lastly, we should add a copyright message to make our email look more professional:

Copyright settings

Copyright settings

And here is what our email footer looks like in back-end and front-end

new order email templates in Email Builder - email footer in back-end

Back-end

new order email templates in Email Builder - email footer in front end

Front-end

Let’s see our result!

new order email templates in Email Builder

Conclusion

We hope that after reading this blog you can understand a walkthrough of how to create a Magento 2 new order email template in Magezon Email Builder. Find our post helpful? Visit us to read more. If you have any questions, don’t hesitate to leave them in the comment section below.

Try FREE Email Builder demo today

Create any Magento transaction email templates that match your web design and theme. Without time-wasting, of course, no coding skills needed. 

About Laura Cao

Laura Cao
Laura graduated from Foreign Trade University with a bachelor’s degree in Business English and is currently serving as a content marketer at Magezon. She indulges in reading and writing everything about Magento. In her spare time, gardening and hanging out with friends are her area of interest.

Check Also

responsive-email-design

Explain Responsive Email Design in Magento 2 Email Builder

When creating a web page, along with a brilliantly designed theme, people also take into …

Leave a Reply