Supply Order Receipt email template
A clean order receipt for a small goods shop with item photos, discount and totals, shipping and billing addresses side by side and quick order links.
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>Supply Order 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;}
.ete-nav-cell{padding-top:12px!important;}.ete-nav-cell p{text-align:center!important;}
.ete-ds-20{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#121212!important;}
.ete-content{background-color:#1c1c1e!important;}
.ete-text{color:#d4d4d6!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9c9ca3!important;}
.ete-link{color:#8db8f0!important;}
.ete-border{border-color:#34343a!important;}
.ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
.ete-btn{background-color:#5696e5!important;border-color:#5696e5!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#5696e5!important;}
.ete-btn-outline-text{color:#5696e5!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:#d4d4d6!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9c9ca3!important;}
[data-ogsc] .ete-link{color:#8db8f0!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#121212!important;}
[data-ogsb] .ete-content{background-color:#1c1c1e!important;}
[data-ogsb] .ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#ffffff;">
<!-- 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;">We are preparing your package. Tracking follows when it ships. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#ffffff;">
<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;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td class="ete-px" style="padding:24px 32px 20px;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="536" cellpadding="0" cellspacing="0" border="0"><tr><td width="215" valign="middle"><![endif]--><div class="ete-stack ete-stack-center" style="display:inline-block;vertical-align:middle;min-width:40.11%;max-width:100%;width:40.11%;width:calc((429px - 100%) * 429);font-size:16px;text-align:left;"><span class="ete-heading" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-0.3px;color:#333333;">Plainward Supply</span></div><!--[if mso]></td><td width="321" valign="middle"><![endif]--><div class="ete-stack ete-stack-center ete-nav-cell" style="display:inline-block;vertical-align:middle;min-width:59.88%;max-width:100%;width:59.88%;width:calc((429px - 100%) * 429);font-size:16px;text-align:right;"><p style="margin:0;text-align:right;"><a href="https://example.com/orders/103571871" style="display:inline-block;padding:4px 10px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;font-weight:700;color:#808080;text-decoration:none;text-transform:uppercase;letter-spacing:1px;">#103571871</a></p></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h3 class="ete-heading ete-ds-20" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:24px;font-weight:700;color:#333333;text-align:left;mso-line-height-rule:exactly;">Thank you for your purchase!</h3></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#404040;text-align:left;">Hi {{first_name}},</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#404040;text-align:left;">We are preparing your package. Your tracking number will follow as soon as the parcel is ready to ship.</p></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/103571871" style="height:48px;v-text-anchor:middle;width:199px;" arcsize="6%" strokecolor="#5696e5" fillcolor="#5696e5"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">View your order</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/orders/103571871" style="display:inline-block;background-color:#5696e5;border:1px solid #5696e5;line-height:48px;border-radius:3px;color:#ffffff;font-family:'Helvetica Neue', Helvetica, 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;">View your order</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#333333;text-align:left;mso-line-height-rule:exactly;">Order summary</h2><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 #eaeaea;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/supply-order-receipt-pen.jpg" alt="Fountain pen resting on white paper" 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 #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;"><strong>Writing pen</strong><br><span class="ete-muted" style="color:#808080;font-size:13px;">Black / black ink</span><br><span class="ete-muted" style="color:#808080;font-size:13px;">Qty 5</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;;white-space:nowrap;">$25.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #eaeaea;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/supply-order-receipt-tote.jpg" alt="Natural canvas tote bag held up by one hand" 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 #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;"><strong>Canvas tote</strong><br><span class="ete-muted" style="color:#808080;font-size:13px;">Natural</span><br><span class="ete-muted" style="color:#808080;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 #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;;white-space:nowrap;">$10.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #eaeaea;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/supply-order-receipt-bottle.jpg" alt="Clear water bottle on a grey surface" 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 #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;"><strong>Glass water bottle</strong><br><span class="ete-muted" style="color:#808080;font-size:13px;">Clear</span><br><span class="ete-muted" style="color:#808080;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 #eaeaea;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;;white-space:nowrap;">$15.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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#808080;">Discount (AUTUMN10)</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;">-$5.00</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#808080;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;">$45.00</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#808080;">Shipping</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;">$9.50</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#808080;">Taxes</td><td class="ete-text" align="right" style="padding:4px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#404040;">$0.00</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #333333;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#333333;">Total</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #333333;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#333333;">$54.50</td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h3 class="ete-heading ete-ds-20" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:24px;font-weight:700;color:#333333;text-align:left;mso-line-height-rule:exactly;">Customer information</h3></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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#333333;text-align:left;mso-line-height-rule:exactly;">Shipping address</h3></div><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#404040;padding-top:6px;text-align:left;">Jordan Ellis<br>
123 Main Street<br>
Chattanooga, TN 37408<br>
United States</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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#333333;text-align:left;mso-line-height-rule:exactly;">Billing address</h3></div><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#404040;padding-top:6px;text-align:left;">Jordan Ellis<br>
123 Main Street<br>
Chattanooga, TN 37408<br>
United States</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#404040;text-align:left;"><b>Shipping method</b><br>
Ground, standard</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #eaeaea;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#808080;text-align:left;">If you have any questions, just reply to this email.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#808080;line-height:20px;text-align:left;"><strong>Plainward Supply</strong><br>9 Foundry Lane, Chattanooga, TN 37402</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#808080;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="https://example.com/orders/103571871/edit" style="color:#808080;text-decoration:underline;">Edit or cancel order</a> · <a class="ete-link" href="https://example.com/orders/103571871/reorder" style="color:#808080;text-decoration:underline;">Reorder</a> · <a class="ete-link" href="{{unsubscribe_url}}" style="color:#808080;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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#808080;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#808080;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Waypoint responsive transactional email templates (ecommerce new order receipt) by usewaypoint, MIT license.
About this template
A full order receipt for an online shop that sells everyday goods. It follows the classic receipt shape customers expect: thanks, a button to the order, the items, the money and the addresses.
The shop name sits top left with the order number on the right. A short thank you and a note about tracking come before a light blue button that opens the order page.
The order summary shows a small photo, name, option and quantity for each item, followed by the discount code, subtotal, shipping, taxes and a bold total. Customer information comes next, with shipping and billing addresses in two columns and the shipping method below.
The footer keeps two handy links, edit or cancel the order and reorder, next to the unsubscribe link. Use it as the default receipt for any small catalog.
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
- Shop name and order number
- Thank you note
- View order button
- Order summary with photos
- Totals
- Addresses in two columns
- Shipping method
- Footer with order links
Subject line ideas
- Thank you for your order #103571871
- Your Plainward Supply receipt
- {{first_name}}, we are packing your order
Preview text idea
We are preparing your package. Tracking follows when it ships.