Outdoor Order Receipt email template
An order confirmation for an outdoor gear shop with a tracking button, three items with small photos, totals, shipping and payment columns and return help.
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>Outdoor 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-ds-24{font-size:28px!important;line-height:31px!important;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0e0e0e!important;}
.ete-content{background-color:#0e0e0e!important;}
.ete-text{color:#cfcfcf!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#a0a0a0!important;}
.ete-link{color:#ffffff!important;}
.ete-border{border-color:#2e2e2e!important;}
.ete-panel{background-color:#1a1a1a!important;border-color:#2e2e2e!important;}
.ete-btn{background-color:#ffffff!important;border-color:#ffffff!important;}
.ete-btn-text{color:#111111!important;}
.ete-btn-outline{border-color:#ffffff!important;}
.ete-btn-outline-text{color:#ffffff!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:#cfcfcf!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#a0a0a0!important;}
[data-ogsc] .ete-link{color:#ffffff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0e0e0e!important;}
[data-ogsb] .ete-content{background-color:#0e0e0e!important;}
[data-ogsb] .ete-panel{background-color:#1a1a1a!important;border-color:#2e2e2e!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;">Order FP-20418 is confirmed. Track it any time with the button inside. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </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 align="left" class="ete-px" style="padding:28px 32px 20px;"><a href="https://example.com/" style="text-decoration:none;color:#111111;"><span class="ete-heading" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:19px;font-weight:700;letter-spacing:2px;color:#111111;">FERNPEAK</span></a></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 class="ete-heading ete-ds-24" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:29px;font-weight:700;color:#111111;text-align:left;mso-line-height-rule:exactly;">Thanks, {{first_name}}. Your order is confirmed.</h1></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:14px;line-height:22px;color:#767676;text-align:left;">Order <b>#FP-20418</b> · placed October 21, 2026</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/FP-20418" style="height:48px;v-text-anchor:middle;width:208px;" arcsize="8%" strokecolor="#111111" fillcolor="#111111"><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/FP-20418" style="display:inline-block;background-color:#111111;border:1px solid #111111;line-height:48px;border-radius:4px;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;">Track 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:#111111;text-align:left;mso-line-height-rule:exactly;">Items</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 #e6e6e6;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/outdoor-order-receipt-jacket.jpg" alt="Person in a grey hooded winter jacket seen from behind" 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 #e6e6e6;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3d3d3d;"><strong>Field jacket, slate</strong><br><span class="ete-muted" style="color:#767676;font-size:13px;">Size M, Qty 1</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e6e6;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3d3d3d;;white-space:nowrap;">$248.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #e6e6e6;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/outdoor-order-receipt-tent.jpg" alt="Green two person tent pitched in fresh snow" 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 #e6e6e6;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3d3d3d;"><strong>Two person tent, moss</strong><br><span class="ete-muted" style="color:#767676;font-size:13px;">One size, Qty 1</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e6e6;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3d3d3d;;white-space:nowrap;">$329.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #e6e6e6;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/outdoor-order-receipt-boots.jpg" alt="Green hiking boots being laced on snowy ground" 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 #e6e6e6;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3d3d3d;"><strong>Trail boots, pine</strong><br><span class="ete-muted" style="color:#767676;font-size:13px;">EU 43, Qty 1</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e6e6e6;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#3d3d3d;;white-space:nowrap;">$189.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:#767676;">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:#3d3d3d;">$766.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:#767676;">Shipping (standard, 3 to 5 days)</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:#3d3d3d;">$0.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:#767676;">Tax</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:#3d3d3d;">$61.28</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #111111;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#111111;">Total</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #111111;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#111111;">$827.28</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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#111111;text-align:left;mso-line-height-rule:exactly;">Shipping to</h3></div><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3d3d3d;padding-top:6px;text-align:left;">Sam Reilly<br>
548 Market Street<br>
San Francisco, CA 94104<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:#111111;text-align:left;mso-line-height-rule:exactly;">Payment</h3></div><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3d3d3d;padding-top:6px;text-align:left;">Card ending in 4242<br>
Charged $827.28</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></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 #e6e6e6;font-size:0;line-height:0;"> </td></tr></table></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:#3d3d3d;text-align:left;">Questions about your order? <a class="ete-link" style="color:#111111;text-decoration:underline;" href="https://example.com/support">Contact support</a> or reply to this email.</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:#3d3d3d;text-align:left;">Free returns within 30 days. <a class="ete-link" style="color:#111111;text-decoration:underline;" href="https://example.com/returns">Start a return</a>.</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:#767676;line-height:20px;text-align:left;"><strong>Fernpeak Outfitters</strong><br>548 Market Street, San Francisco, CA 94104</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#767676;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="https://example.com/orders" style="color:#767676;text-decoration:underline;">Order history</a> · <a class="ete-link" href="https://example.com/returns" style="color:#767676;text-decoration:underline;">Return policy</a> · <a class="ete-link" href="{{unsubscribe_url}}" style="color:#767676;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:#767676;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#767676;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Colorlib Email Templates (template 22, order confirmed) by Colorlib, MIT license.
About this template
An order confirmation for a shop that sells outdoor clothing and camping gear. It is calm and factual, with everything a customer looks for after they pay: what they bought, what it cost, where it is going and how to get help.
A small spaced wordmark leads. The headline thanks the customer by name, with the order number and date underneath, and a black button links to tracking. The items follow as a tidy list with a small photo of each, the name, size and quantity, and the price on the right. Subtotal, shipping and tax sit below, then a bold total with a heavy rule above it.
Two columns show the shipping address and the payment method. A short help section points to support and to the returns page, and the footer repeats the address with links to order history and the return policy.
The layout follows a modern designer receipt template. Pull the real order data into the list and rows, and keep the help lines short.
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
- Wordmark
- Thank you headline with order number
- Track order button
- Items with photos and totals
- Shipping and payment columns
- Help lines
- Footer
Subject line ideas
- Your Fernpeak order is confirmed
- Order FP-20418: thanks, {{first_name}}
- Receipt for your jacket, tent and boots
Preview text idea
Order FP-20418 is confirmed. Track it any time with the button inside.