Customize line-item display in templates

This section describes how to customize email templates to display custom properties of line items.

As discussed in the Customize Order Line Items section, you can add custom properties to order line items, such as a property for specifying the initials to use to monogram an item. By default, email templates that show order information do not display custom properties. This section describes how to customize these templates to display any custom properties added to line items. In addition, it describes how to display product IDs and SKU IDs in line items. (Note that these customizations are independent of each other; you can, for example, add the IDs without adding custom properties.)

You can modify how line items are displayed in the following email templates:

Abandon Order
Items Shipped
Order Approved
Order Pending for Approval
Order Placed
Order Quoted
Order Rejected
Payment Failure
Quote Failed
Quote Requested
Scheduled Order Placed Failed
Store Cancel Order

To add product IDs and SKU IDs to an email template, insert the following in the order items list in the html_body.ftl file:

<br/>
Product ID : ${product.productId}
<br/>
SKU ID: ${product.catRefId}
<br/>

To add custom line-item properties to an email template, insert the following in the order items list in the html_body.ftl file:

<#if product.dynamicProperties??>
  <#list product.dynamicProperties as dynProperty>
   <#if dynProperty.propertyValue??>
    <br/>
    ${dynProperty.propertyLabel}: ${dynProperty.propertyValue}
   </#if>
  </#list>
</#if>

See Download and edit email templates for information about how to modify email templates.

The following example shows the order items list section of the Order Placed template, customized to display custom properties, product IDs, and SKU IDs. The customizations appear in bold:

<!--  Start of order items list-->
<#list data.orderItems as product>
<tr>
  <td
    style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
    color: #687078; text-align: left; line-height: 24px; padding: 5px 10px
    5px 10px;"
    st-content="3col-content1" width="30%">
    <img src="${product.imageLocation}"
    alt="${product.title!}" width="50%">
  </td>
  <td
  style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
  color: #687078; text-align: left; line-height: 24px; padding: 5px 10px
  5px 10px;"
  st-content="3col-content1" width="40%">
  <a href="${product.location}">${product.title!}</a>
  <br/>
  Product ID : ${product.productId}
  <br/>
  SKU ID: ${product.catRefId}
  <br/>
  <!-- Variants -->
  <#if product.variants??>
    <#list product.variants as variant>
      <#if variant.optionValue??>
        <br/>
        ${variant.optionName}: ${variant.optionValue}
      </#if>
    </#list>
  </#if>
   <#if product.dynamicProperties??>
   <#list product.dynamicProperties as dynProperty>
    <#if dynProperty.propertyValue??>
     <br/>
     ${dynProperty.propertyLabel}: ${dynProperty.propertyValue}
      </#if>
    </#list>
   </#if>
  </td>
  <td
    style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
    color: #687078; text-align: center; line-height: 24px; padding: 5px
    10px 5px 10px;"
    st-content="3col-content1" width="10%">
    ${product.quantity}</td>
  <td
    style="font-family: Helvetica, arial, sans-serif; font-size: 14px;
    color: #687078; text-align: right; line-height: 24px; padding: 5px
    10px 5px 10px;"
    st-content="3col-content1" width="20%">
    ${product.price}</td>
</tr>
</#list>
<!--  End of order items list -->