Customize email templates
Commerce includes a default email template for the body section of each message that is sent by the system. The template for the body content is combined with the header and footer templates to create the complete message. The content is formatted with HTML and CSS, and can be easily edited, and customized by adding variables. Email templates can be customized for each website, store, or store view. If using custom templates, make sure to update the system configuration to ensure that the correct template is used. To learn how you can use conditional statements in customizing the email template, see the developer documentation.
The default templates include your logo and store information, and can be used without further customization. However as a best practice, you should view each template, and make any necessary changes before sending them to customers.
Template information
Header template
After completing the configuration, the email header template includes your logo that is linked to your store. If you have a basic knowledge of HTML, you can easily use predefined variables to add store contact information to the header.
Step 1. Load the default template
-
On the Admin sidebar, go to Marketing > Communications > Email Templates.
-
Click Add New Template.
-
In the Load default template section, click the Template selector and choose
Magento_Email>Header.
-
Click Load Template.
The HTML code and variables from the template appear in the form.
Step 2. Customize the template
-
Enter the Template Name for your custom header.
-
Enter a Template Subject to help organize the templates.
In the grid, the list of templates can be sorted and filtered by the Subject column.
-
In the Template Content box, modify the HTML as needed.
note note NOTE When working in the template code, be careful not to overwrite anything that is enclosed in double braces. -
To insert a variable, position the cursor in the code where you want to place the variable and click Insert Variable.
-
Choose the variable that you want to insert.
When a variable is selected, a markup tag for the variable is inserted in the code.
Although the Store Email Address variables are the ones most often included in the header, you can enter the code for any system or custom variable directly into the template.
-
If you need to make any CSSÂ declarations, enter the styles in the Template Styles box.
-
When you are ready to review your work, click Preview Template.
Make any needed changes to the template.
-
When complete, click Save Template.
Your custom header now appears in the list of available email templates.
Step 3. Update the configuration
-
On the Admin sidebar, go to Content > Design > Configuration.
-
In the grid, find the store view that you want to configure and click Edit in the Action column.
-
Scroll down and expand
-
Choose the Header Template that is used as the default for email notifications.
-
When complete, click Save Config.
Footer template
The email template footer contains the closing and signature line of the email message. You can change the closing to fit your style, and add additional information, such as the company name and address below your name.
Step 1. Load the default template
-
On the Admin sidebar, go to Marketing > Communications > Email Templates.
-
Click Add New Template.
-
In the Load default template section, click the Template selector and choose
Magento_Email>Footer. -
Click Load Template.
The HTML code and variables from the template appear in the form.
Step 2. Customize and preview the template
-
Enter the Template Name for your custom footer.
-
Enter a Template Subject to help organize the templates.
In the grid, the templates can be sorted and filtered by the Subject column.
-
In the Template Content box, modify the HTML as needed.
note note NOTE When working in the template code, be careful not to overwrite anything that is enclosed in double braces. -
To insert a variable, position the cursor in the code where you want to place the variable and click Insert Variable.
-
Choose the variable that you want to insert.
When a variable is selected, a markup tag for the variable is inserted in the code.
Although the Store Contact variables are the ones most often included in the footer, you can enter the code for any system or custom variable directly into the template.
-
If you need to make any CSSÂ declarations, enter the styles in the Template Styles box.
Step 3. Update the configuration
-
On the Admin sidebar, go to Content > Design > Configuration.
-
In the grid, find the store view that you want to configure and click Edit in the Action column.
-
Scroll down and expand
-
Choose the Footer Template that is used as the default footer in email notifications.
-
When complete, click Save Config.
Message templates
The process of customizing the body of each message is the same as for customizing the header or footer. The only difference is the message template for each activity or event that triggers a notification. You can use the templates as they are, or customize them to match your voice and brand. In addition to the template text, there is a wide selection of allowed predefined variables and custom variables that you can create and incorporate into the template.
Step 1. Load the default template
-
On the Admin sidebar, go to Marketing > Communications > Email Templates.
-
Click Add New Template.
-
Do the following:
-
Under Load default template, choose the Template that you want to customize.
-
Click Load Template.
-
Step 2. Customize the template
-
For Template Name, enter a name for your custom template.
-
If needed, change the Template Subject.
This is the first line of the message, which is the salutation by default. You can leave it as is, or you can enter something more descriptive.
-
Take note of the Currently Used For path to the template, which is the path used to update the configuration.
-
In the Template Content box, modify the HTML as needed.
The content consists of a combination of HTML tags, CSS directives, variables, and text.
note note NOTE When working in the template code, be careful not to accidentally type over the code that is enclosed in double braces. -
To insert a variable, position the cursor in the code where you want the variable to appear.
The selection of variables varies by template and includes allowed predefined and custom variables, if available.
-
Click Insert Variable and choose the variable that you want to insert.
A command to insert the variable is enclosed in curly braces and added to the code at the cursor location. For example:
customVar code=my_custom_variable -
To make CSS declarations, enter the styles in Template Styles.
note note NOTE Custom styles are applied to the email only if {{template config_path="design/email/header_template"}}is present in the Template Styles. To use custom CSS without a default header template, you must provide them here within the<style>HTML tag.
Step 3. Update the configuration
The Currently Used For breadcrumb trail shows where the template is used. In this example, the template configuration is on the Customer Configuration page, in the Create New Account Options section, and in the Default Welcome Email field.
- Page - Customer Configuration
- Section - Create New Account Options
- Field - Default Welcome Email
-
In the Currently Used For breadcrumb trail, click the link to open the template configuration page.
-
Expand
-
Clear the Use system value checkbox and click the name of your custom template.
-
When complete, click Save Config.
-
In the message at the top of the workspace, click Cache Management and clear any invalid cache.
Step 4. Preview and save the template
-
When you are ready to review your work, click Preview Template.
-
Update the template as needed.
-
When complete, click Save Template.
Your custom template is now available in the list of email templates.