Configuring Email Templates

The configuration determines the logo that appears in the default header template, as well as any custom header and footer templates that you want to use for transactional email messages sent from your store(s).

Transactional email designTransactional Emails

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

  2. Find the store view that you want to configure and click Edit in the Action column.

  3. Under Other Settings, expandExpansion selectorthe Transactional Emails section.

  4. To upload your prepared Logo Image, click Upload and select the file from your system.

  5. In the Logo Image Alt field, enter alternate text to identify the image.

  6. Enter the Logo Width and Logo Height in pixels.

    Enter each value as a number, without the abbreviation. These values refer to the display dimensions of the logo in the header, and not to the actual size of the image.

Step 2. Choose the Header and Footer Templates

If you have custom header and footer templates for your store, or for different stores, you can specify which templates are used for each, according to the scope of the configuration. Otherwise, the default templates are used. 

  1. Choose the Header Template to be used for all transactional email messages.

  2. Choose the Footer Template to be used for all transactional email messages.

  3. 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 whitelisted predefined variables and custom varibles 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.

    Email templates - load default templateTemplate Information

  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. You will later follow this path to update the configuration.

    Email templates - template informationMessage 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.

    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 whitelisted predefined and custom variables, if available.

  6. Click Insert Variable and choose the variable that you want to insert.

    Email templates - insert variableInsert Variable

    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.

Step 3. Update the configuration

The Currently Used For breadcrumb trail at the top of the Template Information section shows where the template is used. In this example, the template configuration is located on the Customer Configuration page, in the Create New Account Options section, and in the Default Welcome Email field.

PageCustomer Configuration
SectionCreate New Account Options
FieldDefault Welcome Email

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

    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.

    Customers configuration - default welcome email templateWelcome Email Configuration

  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.

Field Descriptions

Load default template

TemplateLists the selection of available templates, and identifies the template to be customized.

Template Information

Template NameThe name of your custom template.
Insert VariableInserts a variable into the template at the cursor location.
Template SubjectThe Template Subject appears in the Subject column, and can be used to sort and filter the templates in the list.
Template ContentThe content of the template in HTML.
Template StylesAny CSS style declarations that are needed to format the template can be entered in the Template Styles box.
  • No labels