DocumentationCommerceAdmin Systems Guide

Customize email templates

Last update: Thu Jul 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Admin
  • Leader

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 and widgets. 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.

w-500 modal-image
Example - welcome email preview

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.

w-700 modal-image
Email templates

Template information

Field
Description
Template Name
The name of your custom template.
Insert Variable
Inserts a variable into the template at the cursor location.
Template Subject
The Template Subject appears in the Subject column, and can be used to sort and filter the templates in the list.
Template Content
The content of the template in HTML.
Template Styles
Any CSS style declarations that are needed to format the template can be entered in the Template Styles box.

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

  1. On the Admin sidebar, go to Marketing > Communications > Email Templates.

  2. Click Add New Template.

  3. In the Load default template section, click the Template selector and choose Magento_Email > Header.

    img-md
    w-600 modal-image
    Email template header - load default template

  4. Click Load Template.

    The HTML code and variables from the template appear in the form.

Step 2. Customize the template

  1. Enter the Template Name for your custom header.

  2. 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.

    img-md
    w-600 modal-image
    Email template header information

  3. 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.

  4. To insert a variable, position the cursor in the code where you want to place the variable and click Insert Variable.

  5. Choose the variable that you want to insert.

    img-md
    w-600 modal-image
    Header template - Insert variable

    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.

  6. If you need to make any CSS declarations, enter the styles in the Template Styles box.

  7. When you are ready to review your work, click Preview Template.

    Make any needed changes to the template.

  8. When complete, click Save Template.

    Your custom header now appears in the list of available email templates.

Step 3. Update the configuration

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. In the grid, find the store view that you want to configure and click Edit in the Action column.

  3. Scroll down and expand Expansion selector the Transactional Emails section.

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

  5. When complete, click Save Config.

w-600 modal-image
Transactional email design configuration - header 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

  1. On the Admin sidebar, go to Marketing > Communications > Email Templates.

  2. Click Add New Template.

  3. In the Load default template section, click the Template selector and choose Magento_Email > Footer.

  4. Click Load Template.

    The HTML code and variables from the template appear in the form.

Step 2. Customize and preview the template

  1. Enter the Template Name for your custom footer.

  2. Enter a Template Subject to help organize the templates.

    In the grid, the templates can be sorted and filtered by the Subject column.

    img-md
    w-600 modal-image
    Email template footer - information

  3. 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.

  4. To insert a variable, position the cursor in the code where you want to place the variable and click Insert Variable.

  5. 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.

  6. If you need to make any CSS declarations, enter the styles in the Template Styles box.

Step 3. Update the configuration

  1. On the Admin sidebar, go to Content > Design > Configuration.

  2. In the grid, find the store view that you want to configure and click Edit in the Action column.

  3. Scroll down and expand Expansion selector the Transactional Emails section.

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

  5. When complete, click Save Config.

w-600 modal-image
Transactional email design configuration - footer template

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

  1. On the Admin sidebar, go to Marketing > Communications > Email Templates.

  2. Click Add New Template.

    img-md
    w-600 modal-image
    Email templates - load default template

  3. Do the following:

    • Under Load default template, choose the Template that you want to customize.

    • Click Load Template.

Step 2. Customize the template

  1. For Template Name, enter a name for your custom template.

  2. 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.

  3. Take note of the Currently Used For path to the template, which is the path used to update the configuration.

    img-md
    w-600 modal-image
    Email templates - template information

  4. 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.

  5. 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.

  6. 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

  7. To make CSS declarations, enter the styles in Template Styles.

    img-md
    w-600 modal-image
    Email templates - add custom 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

  1. In the Currently Used For breadcrumb trail, click the link to open the template configuration page.

    img-md
    w-600 modal-image
    Current email template

  2. Expand Expansion selector the section, and find the field for the email template that you customized.

  3. Clear the Use system value checkbox and click the name of your custom template.

    img-md
    w-600 modal-image
    Customers configuration - default welcome email template

  4. When complete, click Save Config.

  5. In the message at the top of the workspace, click Cache Management and clear any invalid cache.

Step 4. Preview and save the template

  1. When you are ready to review your work, click Preview Template.

  2. Update the template as needed.

  3. When complete, click Save Template.

    Your custom template is now available in the list of email templates.

recommendation-more-help
d3c62084-5181-43fb-bba6-1feb2fcc3ec1