Customer New Order Auto-Responder Sample
Here is an example HTML document that would build an Customer New Order Auto-Responder Email for the store. This is, of course, an example and you have the flexibility to lay out this email to suit your own design.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-size: #12px; color: #000000;}
h1 {font-size: 20px; font-weight: bold; margin: 5px 0; color: #800000;}
h2 {font-size: 15px; color: #800000;}
#cartTbl {width: 100%; border-top: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3; clear: both;}
#cartTbl th {background: #F0F0F0;}
#cartTbl th, #cartTbl td {border-bottom: 1px solid #C3C3C3; border-left: 1px solid #C3C3C3; padding: 3px;}
#cartTbl .link {font-size: 90%; white-space: nowrap;}
#cartTbl .product {width: 65%}
#cartTbl .price {width: 5%;}
#cartTbl .quantity {width: 15%;}
#cartTbl .quantity input {width: 30px;}
#cartTbl .price {width: 10%;}
#cartTbl .product-img {border: 1px solid #ccc; background-color: #e9e9e9; padding: 3px; width: 80px; height: 80px; float: left;}
#cartTbl .product-name {margin-left: 100px;}
#cartTbl tr.totals {font-weight: bold;}
#cartTbl tr.totals a {font-weight: normal;}
#cartTbl .quantity-span {text-align: right;}
</style>
</head>
<body>
<h1>Thank you for your order!</h1>
<p>Below is your order information. You will receive an e-mail when your order is shipped.</p>
<table cellspacing="0" id="cartTbl">
<thead>
<tr class="headings">
<th class="product">Item</td>
<th class="price">Price</td>
<th class="quantity">Quantity</td>
<th class="price">Total</td>
</tr>
</thead>
<tbody>
{loop items="#cart.products" value="product"}
<tr>
<td class="product"><div class="product-name">{#product.productName}
{loop items="#product.options" value="option"}
<br />{#option.label}: {#option.value}
{/loop}
</td>
<td class="price">{#product.currentPrice.value}{if #product.pricePerUnit exists && #product.pricePerUnit != "None"} / {#product.pricePerUnit}{/if}</td>
<td class="quantity">{#product.quantityTotal.withFraction}</td>
<td class="price">{#product.totalPrice.value}</td>
</tr>
{/loop}
<tr class="totals">
<td> </td>
<td class="quantity-span" colspan="2">Subtotal</td>
<td class="price">{#cart.subtotalBeforeDiscounts}</td>
</tr>
{if #cart.coupons}
{loop items="#cart.coupons" value="coupon"}
<tr class="totals">
<td> </td>
<td class="quantity-span" colspan="2">{#coupon.name}<br />({#coupon.code})</td>
<td class="price">-{#coupon.savingsValue}</td>
</tr>
{/loop}
<tr class="totals">
<td> </td>
<td class="quantity-span" colspan="2">Subtotal</td>
<td class="price">{#cart.subtotal}</td>
</tr>
{/if}
<tr class="totals">
<td> </td>
<td class="quantity-span" colspan="2">Shipping</td>
<td class="price">{#cart.shipping.total}</td>
</tr>
<tr class="totals">
<td> </td>
<td class="quantity-span" colspan="2">Sales Tax</td>
<td class="price">{#cart.taxes.total}</td>
</tr>
<tr class="totals">
<td> </td>
<td class="quantity-span" colspan="2">Total</td>
<td class="price">{#cart.total}</td>
</tr>
</tbody>
</table>
<h2>Shipping Address</h2>
<p>
{#shipping.firstName} {#shipping.lastName}<br />
{#shipping.address}<br />
{#shipping.city}, {#shipping.state} {#shipping.zipCode}<br />
{#shipping.country}<br />
{#shipping.phone}<br />
{#shipping.email}
</p>
<h2>Billing Address</h2>
<p>
{#billing.firstName} {#billing.lastName}<br />
{#billing.address}<br />
{#billing.city}, {#billing.state} {#billing.zipCode}<br />
{#billing.country}<br />
{#billing.phone}<br />
{#billing.email}
</p>
<h2>Credit Card</h2>
<p>
{#creditCard.type}<br />
{#creditCard.number}<br />
{#creditCard.expirationMonth}/{#creditCard.expirationYear}
</p>
</body>
</html>