Customize email templates

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.

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

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.

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 the Transactional Emails section.

Choose the Header Template that is used as the default for email notifications.

When complete, click Save Config.

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.

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

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.

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 the Transactional Emails section.

Choose the Footer Template that is used as the default footer in email notifications.

When complete, click Save Config.

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.

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

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

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.