Order Confirmation
Professional order confirmation email template with order details, shipping information, and next steps.
Responsive design
Order summary table
Shipping details
Call-to-action buttons
VARIABLES
Template Variables
| Variable | Type | Description | Example |
|---|---|---|---|
{{customerName}}required | string | Customer's first name | John |
{{orderNumber}}required | string | Unique order identifier | ORD-12345 |
{{orderDate}}required | string | Date the order was placed | January 27, 2024 |
{{items}}required | array | List of ordered items | [{ name: 'Product Name', quantity: 1, price: '$99.00' }] |
{{subtotal}}required | string | Order subtotal | $99.00 |
{{shipping}}required | string | Shipping cost | $5.00 |
{{total}}required | string | Order total | $104.00 |
{{shippingAddress}}required | object | Shipping address details | { street: '123 Main St', city: 'San Francisco', state: 'CA', zip: '94102' } |
CODE
Template Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Confirmation</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f4f4f5; padding: 40px 20px;">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; overflow: hidden;">
<!-- Header -->
<tr>
<td style="background-color: #18181b; padding: 32px; text-align: center;">
<h1 style="margin: 0; color: #ffffff; font-size: 24px;">Order Confirmed!</h1>
</td>
</tr>
<!-- Content -->
<tr>
<td style="padding: 32px;">
<p style="margin: 0 0 16px; color: #27272a; font-size: 16px;">Hi {{customerName}},</p>
<p style="margin: 0 0 24px; color: #71717a; font-size: 14px;">Thank you for your order! We've received your order and will begin processing it right away.</p>
<div style="background-color: #f4f4f5; border-radius: 8px; padding: 16px; margin-bottom: 24px;">
<p style="margin: 0 0 8px; color: #71717a; font-size: 12px; text-transform: uppercase;">Order Number</p>
<p style="margin: 0; color: #18181b; font-size: 18px; font-weight: bold;">{{orderNumber}}</p>
</div>
<!-- Order Items -->
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom: 24px;">
<tr>
<td style="border-bottom: 1px solid #e4e4e7; padding: 12px 0;">
<strong style="color: #18181b;">Items</strong>
</td>
</tr>
{{#each items}}
<tr>
<td style="padding: 12px 0; border-bottom: 1px solid #f4f4f5;">
<span style="color: #27272a;">{{this.name}} x {{this.quantity}}</span>
<span style="float: right; color: #18181b;">{{this.price}}</span>
</td>
</tr>
{{/each}}
<tr>
<td style="padding: 12px 0;">
<span style="color: #71717a;">Subtotal</span>
<span style="float: right; color: #27272a;">{{subtotal}}</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0;">
<span style="color: #71717a;">Shipping</span>
<span style="float: right; color: #27272a;">{{shipping}}</span>
</td>
</tr>
<tr>
<td style="padding: 12px 0; border-top: 1px solid #e4e4e7;">
<strong style="color: #18181b;">Total</strong>
<strong style="float: right; color: #18181b;">{{total}}</strong>
</td>
</tr>
</table>
<!-- Shipping Address -->
<div style="margin-bottom: 24px;">
<p style="margin: 0 0 8px; color: #71717a; font-size: 12px; text-transform: uppercase;">Shipping To</p>
<p style="margin: 0; color: #27272a; font-size: 14px;">
{{shippingAddress.street}}<br>
{{shippingAddress.city}}, {{shippingAddress.state}} {{shippingAddress.zip}}
</p>
</div>
<!-- CTA Button -->
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="{{trackingUrl}}" style="display: inline-block; background-color: #18181b; color: #ffffff; text-decoration: none; padding: 12px 32px; border-radius: 6px; font-weight: 500;">Track Your Order</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="background-color: #f4f4f5; padding: 24px; text-align: center;">
<p style="margin: 0; color: #71717a; font-size: 12px;">Questions? Contact us at support@example.com</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When to Use This Template
Use this order confirmation email immediately after a customer completes a purchase. This template provides:
- Clear confirmation that the order was received
- Complete order summary with itemized pricing
- Shipping address confirmation
- Easy access to order tracking
Customization Tips
- Add your brand logo - Replace the header with your company logo for brand recognition
- Include estimated delivery - Add an estimated delivery date to set expectations
- Cross-sell products - Consider adding a "You might also like" section
- Social proof - Include customer review requests after delivery