Order Confirmed Receipt email template
A clean order confirmation and receipt: items with images, subtotal, shipping, tax and total, shipping and payment details, and a track order button. Free HTML.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Order Confirmed Receipt</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0d1118!important;}
.ete-content{background-color:#151b25!important;}
.ete-text{color:#d5dce6!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#94a0b2!important;}
.ete-link{color:#8db0ff!important;}
.ete-border{border-color:#2a3342!important;}
.ete-panel{background-color:#1b2330!important;border-color:#2a3342!important;}
.ete-btn{background-color:#4b7be0!important;border-color:#4b7be0!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#4b7be0!important;}
.ete-btn-outline-text{color:#4b7be0!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#d5dce6!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#94a0b2!important;}
[data-ogsc] .ete-link{color:#8db0ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0d1118!important;}
[data-ogsb] .ete-content{background-color:#151b25!important;}
[data-ogsb] .ete-panel{background-color:#1b2330!important;border-color:#2a3342!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#eef2f7;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Order #10482 is confirmed. We are packing it now. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#eef2f7;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:8px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#111a26;">Northwind Goods</span></td></tr>
<tr><td align="left" class="ete-px" style="padding:40px 32px;"><h1 class="ete-heading ete-h1" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#111a26;text-align:left;mso-line-height-rule:exactly;">Thanks, your order is in</h1><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:17px;line-height:27px;color:#33404f;padding-top:14px;text-align:left;">We are packing it now and will email you again when it ships. Here is your receipt.</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#111a26;text-align:left;mso-line-height-rule:exactly;">Order summary</h2><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:14px;line-height:22px;color:#6b7686;padding-top:4px;">Order #10482, placed 24 October 2026</p><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:16px;"><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #e2e8f0;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/northwind-mug.png" alt="Blue enamel mug" width="64" height="64" class="" style="display:block;width:64px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:4px;"></td><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #e2e8f0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;"><strong>Enamel camp mug</strong><br><span class="ete-muted" style="color:#6b7686;font-size:13px;">Color: Navy</span><br><span class="ete-muted" style="color:#6b7686;font-size:13px;">Qty 2</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e2e8f0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;;white-space:nowrap;">$36.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #e2e8f0;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/northwind-notebook.png" alt="Red notebook" width="64" height="64" class="" style="display:block;width:64px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:4px;"></td><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #e2e8f0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;"><strong>Field notebook</strong><br><span class="ete-muted" style="color:#6b7686;font-size:13px;">Dotted, A5</span><br><span class="ete-muted" style="color:#6b7686;font-size:13px;">Qty 1</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e2e8f0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;;white-space:nowrap;">$14.00</td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" style="padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#6b7686;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;">$50.00</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#6b7686;">Shipping</td><td class="ete-text" align="right" style="padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;">$4.90</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#6b7686;">Tax</td><td class="ete-text" align="right" style="padding:4px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:22px;color:#33404f;">$4.39</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #111a26;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#111a26;">Total</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #111a26;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#111a26;">$59.29</td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><div style="padding-top:0px;"><h3 class="ete-heading" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#111a26;text-align:left;mso-line-height-rule:exactly;">Shipping to</h3></div><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#33404f;padding-top:6px;text-align:left;">Alex Morgan<br>
18 Harbor Lane<br>
Boston, MA 02110</p></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><div style="padding-top:0px;"><h3 class="ete-heading" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#111a26;text-align:left;mso-line-height-rule:exactly;">Payment</h3></div><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#33404f;padding-top:6px;text-align:left;">Visa ending in 4242<br>
Paid on 24 October 2026</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/orders/10482" style="height:48px;v-text-anchor:middle;width:208px;" arcsize="13%" strokecolor="#1f4fa3" fillcolor="#1f4fa3"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Track your order</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/orders/10482" style="display:inline-block;background-color:#1f4fa3;border:1px solid #1f4fa3;line-height:48px;border-radius:6px;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Track your order</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:14px;line-height:22px;color:#6b7686;text-align:left;">Questions about your order? Reply to this email or visit our <a class="ete-link" style="color:#1f4fa3;text-decoration:underline;" href="https://example.com/help">help page</a>. Returns are free for 30 days.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b7686;line-height:20px;text-align:left;"><strong>Northwind Goods</strong><br>5 Dock Street, Boston, MA</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b7686;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6b7686;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:12px;line-height:18px;color:#6b7686;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6b7686;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
About this template
This transactional template confirms an order and works as a receipt in one email. It is clean and calm on purpose, because people open it to check facts, not to be sold to.
A short line at the top gives the good news and the order number. The order summary lists each item with a small square image, the name, a detail line such as color or size, the quantity and the price. Under the items, the summary shows subtotal, shipping and tax, then the total in bold above a dark rule, so the most important number is the easiest to find.
Two columns follow with the shipping address and the payment method, which helps buyers catch a wrong address early. A Track your order button leads to the shipping page, and a muted line explains how to get help or return an item.
The blue accent and the plain layout fit most shops. Replace the sample items and totals with the merge tags of your shop system, and keep the email lean. On phones, the address columns stack and the item table stays readable.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Logo
- Confirmation note
- Order items table
- Totals
- Shipping and payment columns
- Track order button
- Help note
- Footer
Subject line ideas
- Your order #10482 is confirmed
- Thanks, we got your order
- Order received: here is your receipt
Preview text idea
Order #10482 is confirmed. We are packing it now.