Back to transactional templates
Ecommerce Order Confirmation
The order confirmation email is one of the most opened emails any ecommerce brand sends. This template is designed to reduce post-purchase anxiety with clear item details, pricing, and a prominent tracking button. Clean, minimal, and completely scannable.
Responsive Dark Mode Gmail Outlook Apple Mail
Preview
Production-Ready HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title>Order Confirmed — #ORD-28847</title>
<style>
@media only screen and (max-width: 600px) {
.email-container { width: 100% !important; }
.mobile-pad { padding: 20px !important; }
.item-img { width: 60px !important; height: 60px !important; }
}
@media (prefers-color-scheme: dark) {
.dark-bg { background-color: #0e0e0e !important; }
.dark-card { background-color: #161616 !important; }
.dark-text { color: #f0f0f0 !important; }
.dark-muted { color: #888 !important; }
.dark-border { border-color: #2a2a2a !important; }
}
</style>
</head>
<body width="100%" style="margin:0; padding:0; background-color:#FAFAFA; font-family:'Helvetica Neue', Arial, sans-serif;">
<center style="width:100%; background-color:#FAFAFA;" class="dark-bg">
<div style="display:none; max-height:0; overflow:hidden; mso-hide:all;">Your order #ORD-28847 has been confirmed and is being prepared for shipment.͏ ͏ ͏ ͏ ͏</div>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="600" class="email-container" style="max-width:600px; margin:auto; background-color:#ffffff;" class="dark-card">
<!-- Header -->
<tr>
<td style="padding: 28px 40px; border-bottom: 1px solid #F0F0F0;" class="dark-border">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<p style="margin:0; font-size: 20px; font-weight: 800; color: #111111; letter-spacing: -0.5px;" class="dark-text">Forma<span style="color: #E85D26;">.</span></p>
</td>
<td style="text-align: right;">
<p style="margin:0; font-size: 11px; background-color: #ECFDF5; color: #059669; padding: 4px 10px; border-radius: 20px; display: inline-block; font-weight: 600; letter-spacing: 0.3px;">✓ Order Confirmed</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Confirmation hero -->
<tr>
<td style="padding: 40px 40px 32px;" class="mobile-pad">
<h1 style="margin: 0 0 8px; font-size: 28px; font-weight: 700; color: #111111; line-height: 1.2;" class="dark-text">Thanks for your order!</h1>
<p style="margin: 0; font-size: 15px; color: #6B7280; line-height: 1.6;">Order <strong style="color: #111111;" class="dark-text">#ORD-28847</strong> is confirmed. We'll send you a tracking link once your items ship — usually within 1–2 business days.</p>
</td>
</tr>
<!-- Order items -->
<tr>
<td style="padding: 0 40px 28px;" class="mobile-pad">
<p style="margin: 0 0 16px; font-size: 11px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;">Your items</p>
<!-- Item 1 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border: 1px solid #F0F0F0; border-radius: 8px; padding: 16px; margin-bottom: 10px;" class="dark-border">
<tr>
<td class="item-img" width="80" style="vertical-align: top;">
<div style="width: 72px; height: 72px; background: linear-gradient(135deg, #F3E8D8, #E0C9A6); border-radius: 6px;"></div>
</td>
<td style="vertical-align: top; padding-left: 16px;">
<p style="margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #111111;" class="dark-text">Merino Wool Crew Sweater</p>
<p style="margin: 0 0 6px; font-size: 12px; color: #9CA3AF;">Size: M · Color: Oatmeal</p>
<p style="margin: 0; font-size: 13px; color: #6B7280;">Qty: 1</p>
</td>
<td style="vertical-align: top; text-align: right;">
<p style="margin: 0; font-size: 15px; font-weight: 700; color: #111111;" class="dark-text">$148.00</p>
</td>
</tr>
</table>
<!-- Item 2 -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border: 1px solid #F0F0F0; border-radius: 8px; padding: 16px;" class="dark-border">
<tr>
<td class="item-img" width="80" style="vertical-align: top;">
<div style="width: 72px; height: 72px; background: linear-gradient(135deg, #D4E8D4, #A8C8A8); border-radius: 6px;"></div>
</td>
<td style="vertical-align: top; padding-left: 16px;">
<p style="margin: 0 0 2px; font-size: 14px; font-weight: 600; color: #111111;" class="dark-text">Linen Chino Trousers</p>
<p style="margin: 0 0 6px; font-size: 12px; color: #9CA3AF;">Size: 32×30 · Color: Sage</p>
<p style="margin: 0; font-size: 13px; color: #6B7280;">Qty: 1</p>
</td>
<td style="vertical-align: top; text-align: right;">
<p style="margin: 0; font-size: 15px; font-weight: 700; color: #111111;" class="dark-text">$112.00</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Order summary -->
<tr>
<td style="padding: 0 40px 28px;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #F9F9F9; border-radius: 8px; padding: 20px;" class="dark-card">
<tr>
<td style="padding: 0 20px; font-size: 13px; color: #6B7280; padding-bottom: 8px;">Subtotal<br>Shipping<br>Tax</td>
<td style="padding: 0 20px; font-size: 13px; color: #111111; text-align: right; padding-bottom: 8px;" class="dark-text">$260.00<br>Free<br>$21.45</td>
</tr>
<tr>
<td colspan="2" style="padding: 0 20px; border-top: 1px solid #E5E7EB; padding-top: 12px;" class="dark-border">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="font-size: 15px; font-weight: 700; color: #111111;" class="dark-text">Total</td>
<td style="font-size: 18px; font-weight: 800; color: #111111; text-align: right;" class="dark-text">$281.45</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Shipping address -->
<tr>
<td style="padding: 0 40px 36px;" class="mobile-pad">
<p style="margin: 0 0 10px; font-size: 11px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;">Shipping to</p>
<p style="margin: 0; font-size: 14px; color: #374151; line-height: 1.7;" class="dark-text">
Marcus Webb<br>
1208 Birchwood Lane, Apt 3B<br>
Chicago, IL 60647<br>
United States
</p>
</td>
</tr>
<!-- CTA -->
<tr>
<td style="padding: 0 40px 40px; text-align: center;" class="mobile-pad">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td style="background-color: #111111; border-radius: 6px;" class="dark-card">
<a href="#" style="display:inline-block; font-size: 14px; font-weight: 600; color: #ffffff; text-decoration: none; padding: 14px 32px; border-radius: 6px; letter-spacing: 0.2px;">Track your order →</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 24px 40px; border-top: 1px solid #F0F0F0; text-align: center;" class="dark-border">
<p style="margin: 0 0 4px; font-size: 12px; color: #9CA3AF;">Questions? <a href="mailto:hello@formaclothing.com" style="color: #6B7280; text-decoration: underline;">hello@formaclothing.com</a></p>
<p style="margin: 0; font-size: 11px; color: #D1D5DB;"><a href="#" style="color: #9CA3AF; text-decoration: none;">Order history</a> · <a href="#" style="color: #9CA3AF; text-decoration: none;">Returns</a> · <a href="#" style="color: #9CA3AF; text-decoration: none;">Unsubscribe</a></p>
</td>
</tr>
</table>
</center>
</body>
</html>