Customize email templates for split shipping
If you configure your store to support split shipping, you should also customize the templates for emails that contain order summaries so those emails can display the appropriate shipping addresses.
The data available to the email templates to support the split shipping feature comes
from the Orders resource in the Store REST API. Support has been added for multiple shipping
groups, in the form of a shippingGroups array, and for an alias property to
identify the addresses contained in those shipping groups. For more information, see Understand REST support for split shipping.
Note: Before you customize the email templates, read Configure Email Settings. For details about working with FreeMarker
templates, see the Apache FreeMarker documentation at freemarker.org.
To display multiple shipping addresses in an email template:
- Download the email template as described in Customize email templates.
- Update the
html_body.ftlfile. See Sample email template for sections of a samplehtml_body.ftlfile that supports split shipping. - Upload the updated template as described in Customize email templates.
Sample email template
The following sample shows split shipping customizations you might make to the html_body.ftl file for the Order Placed email template. Order Placed emails let customers know that an order has been submitted for fulfillment. The html_body.ftl file is the FreeMarker template file that configures the HTML body of the email.
IMPORTANT: This sample code is not production ready and should be used for informational purposes only. It has not been tested for accessibility, internationalization, or unexpected path flows.
The default html_body.ftl file for the Order Placed email displays the shipping address, shipping method, payment methods, and a cart summary for an order. This sample uses the macro directive to allow the email body to display multiple shipping addresses, along with their associated shipping methods and cart summaries. (A FreeMarker macro is a template fragment associated with a variable.)
The following macro is used to display the appropriate shipping method.
<!-- ko if: cart().isSplitShipping() -->
<!-- ko foreach: cart().orderShippingGroups -->
<!-- ko if: $data.hasOwnProperty("priceInfo") -->
<div class="well well-sm small"> <strong>
Shipping Group
<span data-bind="text: ($index() + 1)"></span>
(<span data-bind="text: shippingAddress.alias"></span> -
<span data-bind="text:
shippingMethod.shippingMethodDescription"></span>)
</strong> <div class="row">
<div class="col-xs-7">Subtoal</div>
<div class="col-xs-5 text-right">
<span data-bind="currency: {
price: priceInfo.subTotal,
currencyObj:
$parent.site().selectedPriceListGroup().currency}">
</span> </div>
</div> <div class="row">
<div class="col-xs-7">
Shipping (<span data-bind="text:
shippingMethod.shippingMethodDescription"></span>)
</div> <div class="col-xs-5 text-right">
<span data-bind="currency: {
price: priceInfo.shipping,
currencyObj:
$parent.site().selectedPriceListGroup().currency}">
</span> </div>
</div>
<!-- ko if: $data.hasOwnProperty("discountInfo") -->
<!-- ko if: discountInfo.shippingDiscount !== 0 -->
<div class="row">
<div class="col-xs-7">Shipping Discount </div>
<div class="col-xs-5 text-right">
<span data-bind="currency: {
price: -discountInfo.shippingDiscount,
currencyObj:
$parent.site().selectedPriceListGroup().currency}">
</span> </div>
</div> <!-- /ko -->
<!-- /ko -->
<!-- ko if: priceInfo.shippingSurchargeValue &&
priceInfo.shippingSurchargeValue !== 0 -->
<div class="row">
<div class="col-xs-7">Shipping Surcharge</div>
<div class="col-xs-5 text-right">
<span data-bind="currency: {
price: priceInfo.shippingSurchargeValue,
currencyObj:
$parent.site().selectedPriceListGroup().currency}">
</span> </div>
</div> <!-- /ko -->
<!-- ko if: $parent.cart().showTaxSummary -->
<div class="row">
<div class="col-xs-7">Sales Tax</div>
<div class="col-xs-5 text-right">
<span data-bind="currency: {
price: priceInfo.tax,
currencyObj:
$parent.site().selectedPriceListGroup().currency}">
</span> </div>
</div> <!-- /ko -->
<!-- ko if: (taxPriceInfo.isTaxIncluded &&
$parent.cart().showTaxSummary) -->
<div class="row">
<div class="col-xs-7">Group Total (excluding tax)</div>
<div class="col-xs-5 text-right">
<span data-bind="currency: {
price: priceInfo.totalWithoutTax,
currencyObj: $parent.site().priceListGroup.currency}">
</span> </div>
</div> <!-- /ko -->
<div class="row"> <div class="col-xs-7">
Group Total
<!-- ko if: (taxPriceInfo.isTaxIncluded &&
$parent.cart().showTaxSummary) -->
<span data-bind="widgetLocaleText: 'includingTaxText'"></span>
<!-- /ko --> </div>
<div class="col-xs-5 text-right">
<span data-bind="currency: {
price: priceInfo.total,
currencyObj:
$parent.site().selectedPriceListGroup().currency}">
</span> </div> </div> </div> <!-- /ko --> <!-- /ko -->
<!-- /ko -->The following macro is used to display the cart summary for each shipping group.
<#macro displayShippingItems shippingItems>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"
class="devicewidthinner">
<tbody>
<tr>
<td width="30%"
style="font-family: Helvetica, arial, sans-serif;
font-size: 18px; color: #FFFFFF; text-align: left;
line-height: 24px; background: #1c73a3;
padding: 5px 10px 5px 10px;"
st-title="3col-title1">
${getString("ORDER_PLACED_ITEM_TITLE")}
</td>
<td width="40%"
style="font-family: Helvetica, arial, sans-serif; font-size: 18px;
color: #ffffff; text-align: center; line-height: 24px;
background: #1c73a3; padding: 5px 10px 5px 10px;"
st-title="3col-title1"> </td>
<td width="10%"
style="font-family: Helvetica, arial, sans-serif; font-size: 18px;
color: #ffffff; text-align: center; line-height: 24px;
background: #1c73a3; padding: 5px 10px 5px 10px;"
st-title="3col-title1">
${getString("ORDER_PLACED_QUANTITY_TITLE")}
</td>
<td width="20%"
style="font-family: Helvetica, arial, sans-serif; font-size: 18px;
color: #ffffff; text-align: right; line-height: 24px;
background: #1c73a3; padding: 5px 10px 5px 10px;"
st-title="3col-title1">
${getString("ORDER_PLACED_PRICE_TITLE")}
</td>
</tr>
<#list shippingItems 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>
<!-- Variants -->
<#if product.variants??>
<br />
<#list product.variants as variant>
${variant.optionName}: <#if variant.optionValue??>
${variant.optionValue}</#if>
<br />
</#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>
</tbody>
</table>
</#macro>The following macro is used to display a shipping group’s shipping method.
<#macro displayShippingMethodMacro shippingMethod >
<table width="186" align="right" border="0"
cellpadding="0" cellspacing="0" class="devicewidth">
<tbody> <tr> <td>
<!-- start of text content table -->
<table width="186" align="center" border="0"
cellpadding="0" cellspacing="0"
class="devicewidthinner"> <tbody>
<!-- title --> <tr>
<td
style="font-family: Helvetica, arial, sans-serif;
font-size: 18px; color: #666666; text-align: center;
line-height: 24px;"
st-title="3col-title3">
${getString("ORDER_PLACED_SHIPPING_METHODS_TITLE")}
</td> </tr>
<!-- end of title -->
<!-- Spacing --> <tr>
<td width="100%" height="15"
style="font-size: 1px; line-height: 1px;
mso-line-height-rule: exactly;"> </td>
</tr> <!-- Spacing -->
<!-- content --> <tr>
<td
style="font-family: Helvetica, arial, sans-serif;
font-size: 14px; color: #687078; text-align: center;
line-height: 24px;" st-content="3col-content3"> ${shippingMethod!}<br /> </td> </tr> <!-- end of content --> </tbody> </table>
</td> </tr>
<!-- end of text content table --> </tbody>
</table> </#macro>The following macros are used to display a single shipping group or multiple shipping groups.
<#macro displayShippingGroupMacro shippingGroup> <!-- 3 Start of Columns -->
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0"
border="0" id="backgroundTable"> <tbody> <tr>
<td> <@displayShippingAddressMacro
shippingAddress=shippingGroup.shippingAddress />
</td> <td>
<@displayShippingMethodMacro
shippingMethod=shippingGroup.shippingMethod />
</td> </tr> <tr>
<td colspan="2">
<@displayShippingItems shippingItems=shippingGroup.shippingItems />
</td> </tr> </tbody> </table> </#macro> <#macro displayMultipleShippingGroupsMacro shippingAddresses >
<div>Calling details </div>
<#list shippingAddresses as currShippingGroup>
<@displayShippingGroupMacro shippingGroup=currShippingGroup /> </#list> </#macro>The following code calls displayMultipleShippingGroupsMacro to display the order details for multiple shipping groups if the order includes them.
<div> Multi shipping methods</div>
<#if data.shippingGroups??>
<@displayMultipleShippingGroupsMacro
shippingAddresses=data.shippingGroups />
</#if>