Thursday , June 20 2024
Home > Magezon Extensions > Email Builder Tutorials > How to Edit Email Templates in Magento 2

How to Edit Email Templates in Magento 2

Magento 2 edit email templates: a detailed instruction

Magento email templates (once-called Magento 2 transactional emails in Magento 1) have been a hot topic between Magento 2 store owners and Magento 2 developers as well. Creating and editing a Magento transactional email is the very first step to make a smooth and effective business communication.

However, for Magento dummies, it’s such an obstacle to get familiar with the Magento backend and use it the right way. So this blog will navigate you around the website to create, edit and assign the Magento 2 email templates. Also, before putting an end we’ll give you some tips to make your email fully responsive in any device screen so keep reading on.

1. Create Magento 2 Email Templates in the Admin Panel

Before editing any email templates, we need an existing one right? In the admin panel go to Marketing >> Communications >> Email Templates

Marketing >> Communications >> Email Templates

Then you will see an email template grid, click Add New Template button in the top right corner:

Add New Template button

Next, pay attention to the Template Information section, and see the below explanation to understand what the backend editor requires:

Template Information section
  • Fill the Template Name the way you want as long as it meet your template identification purpose. 
  • Template Subject: In this field, the system variables can be applied and the field represents the subject of your email.
  • Template Content: I believe it’s the most critical section because it carries the main message of the email. Honestly, you might feel complicated at first. People mostly use system variables to build their content although it may be a little messy for those who are new to the platform.

Note: For the average Jane or Joe, you should find help from third parties who provide Magento 2 email builder extensions. Why? Because these modules will alleviate the volume of complexity in the Magento backend with their user-friendly editor.

  • Template style: This field is optional. Furthermore, it’s the place where you style your email templates with custom CSS code. These styles can be added inside a <style> tag in the <head>of a letter.

Afterward, click Save Template, and the process is done!

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. 

2. Edit Magento 2 email templates from the admin panel

a. Edit existing email templates

In the admin panel flyout menu, go to Marketing >> Communications >> Email Templates:

Marketing >> Communications >> Email Templates

In the email template grid, choose the one you want to edit:

email template

There are 4 main sections for you to edit an email: template name, template subject, template content, and template style. Do not forget to use the system variables and apply custom CSS to add charm to your email.

system variables

b. Edit default Magento 2 email templates

Step 1: Go to Marketing >> Communications >> Email Templates

Marketing >> Communications >> Email Templates

Step 2: Click Add New Template

Click Add New Template

It leads you to the email template editor.

Step 3: In the Load Default Template section, click the dropdown icon to choose your default template

Below is the list of Magento default email template you may see:

  • Payment Failed
  • Contact Form
  • Change Email
  • Change Email and Password
  • Forgot Password
  • New Account
  • New Account (Magento/luma)
  • New Account Confirmation Key
  • New Account Confirmed
  • New Account Without Password
  • Remind Password
  • Reset Password
  • Currency Update Warnings
  • Footer
  • Footer (Magento/luma)
  • Header
  • Subscription Confirmation
  • Subscription Success
  • Unsubscription Success
  • Cron Error Warning
  • Price Alert
  • Stock Alert
  • Credit Memo Update
  • Credit Memo Update (Magento/luma)
  • Credit Memo Update for Guest
  • Credit Memo Update for Guest (Magento/luma)
  • Invoice Update
  • Invoice Update (Magento/luma)
  • Invoice Update for Guest
  • Invoice Update for Guest (Magento/luma)
  • New Credit Memo
  • New Credit Memo (Magento/luma)
  • New Credit Memo for Guest
  • New Credit Memo for Guest (Magento/luma)
  • New Invoice
  • New Invoice (Magento/luma)
  • New Invoice for Guest
  • New Invoice for Guest (Magento/luma)
  • New Order
  • New Order (Magento/luma)
  • New Order for Guest
  • New Order for Guest (Magento/luma)
  • Order Update
  • Order Update (Magento/luma)
  • Order Update for Guest
  • Order Update for Guest (Magento/luma)
  • Shipment Update
  • Shipment Update (Magento/luma)
  • Shipment Update for Guest
  • Shipment Update for Guest (Magento/luma)
  • Send Product Link to Friend
  • Sitemap Generation Warnings
  • Forgot Admin Password
  • User Notification
  • Wish List Sharing

With this endless list of email templates, you can choose a proper one that meets your business communication requirements. We take Change email and password template for example:

choose your default template

Then, click Load Template:

load template

Afterward, the template subject and content are available. All you have to do now are adding template name, styling CSS, and adjusting the content as your wish. 

adjusting the content as your wish

3. Assign Magento 2 email templates

After creating and editing Magento 2 email templates, now you must be eager to know how to use them. Well, to assign an email template, you need to follow just a few simple steps.

Suppose that we’ve created and edited a Change email and password template like the example above, now we have to assign it for a specific mission. 

So from the admin panel flyout menu, go to Store >> Settings >> Configuration:

Store >> Settings >> Configuration

Span Sales >> Sales Emails:

Span Sales >> Sales Emails

Choose your preferred section that you want to assign your email. In this case, I’ll span Order section. In the New Order Confirmation Template field, remove the checkmark Use default system value, and choose your desired template in the dropdown list, just like the image below:

remove checkmark

Finally, click Save Config.

Email logo is mandantory for all online business, read our blog to know how to edit email logo from the Magento backend with ease.

5. Tips to Design a 100% Responsive Magento 2 Email Template

Thanks to the extensive flourishing of technology, people nowadays are empowered to send and read email no matter where they are, as long as they own a portable device. So it’s inevitable that an email must be highly responsive and look reasonable in any device screen. How to do that? Well, when creating and customizing a Magento 2 email template, you should put an eye on the tips below:

  • Use table-layout (<table> instead of <div>)
  • Avoid shortening the HEX codes for colors (#ffffff instead of #fff)
  • Use CSS2 properties instead of CSS3
  • HTML4 instead of HTML5
  • Use background_color instead of background, and use the extended properties like padding-top, padding-left, etc. 
  • Avoid background images, instead, use background color, add visual elements using the tag.
  • Use HTML attributes instead of CSS
  • Add inline CSS styles to your layout
  • Use standard system font

Read more: Responsive Magento Email Design: All You Need to Know

Conclusion

We hope that after reading this post you will find it easy to edit your own Magento 2 email templates. We’ll be back everyday with tons of other amazing post about Magento and profound understanding of ecommerce needs so do not forget to turn on your notifications. Any questions are welcome in the comment section.

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