Takeout Order Receipt email template
A takeout order receipt for a restaurant: pickup time in a big red panel, dishes with small pictures, the total and the pickup address and time.
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>Takeout 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;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0f0c0b!important;}
.ete-content{background-color:#1a1615!important;}
.ete-text{color:#e3d9d5!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#ab9f9a!important;}
.ete-link{color:#fca5a5!important;}
.ete-border{border-color:#342d2a!important;}
.ete-panel{background-color:#26201e!important;border-color:#342d2a!important;}
.ete-btn{background-color:#dc2626!important;border-color:#dc2626!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#dc2626!important;}
.ete-btn-outline-text{color:#dc2626!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:#e3d9d5!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#ab9f9a!important;}
[data-ogsc] .ete-link{color:#fca5a5!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0f0c0b!important;}
[data-ogsb] .ete-content{background-color:#1a1615!important;}
[data-ogsb] .ete-panel{background-color:#26201e!important;border-color:#342d2a!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f4efec;">
<!-- 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 NY-2291 is confirmed. Pick it up at 6:45 PM at Canal Street. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f4efec;">
<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:6px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="center" class="ete-px" style="padding:28px 32px 20px;background-color:#141010;"><span class="" style="font-family:'Courier New', Courier, monospace;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;">NOODLE YARD</span></td></tr>
<tr><td align="center" class="ete-px" style="padding:40px 32px;background-color:#c81e1e;"><p style="margin:0 0 12px;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#ffffff;text-align:center;">Ready for pickup at</p><h1 class="ete-h1" style="margin:0;font-family:'Courier New', Courier, monospace;font-size:32px;line-height:40px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;">6:45 PM</h1><p class="" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:27px;color:#ffffff;padding-top:14px;text-align:center;">Thanks, {{first_name}}. Order NY-2291 is in the wok.</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:'Courier New', Courier, monospace;font-size:24px;line-height:32px;font-weight:700;color:#141010;text-align:left;mso-line-height-rule:exactly;">Your order</h2><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:22px;color:#736a66;padding-top:4px;">Order NY-2291, paid by card</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 #ebe3df;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/noodle-ramen.png" alt="Red bowl of ramen with an egg and chopsticks" 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 #ebe3df;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;"><strong>Spicy miso ramen</strong><br><span class="ete-muted" style="color:#736a66;font-size:13px;">Extra egg, medium spice</span><br><span class="ete-muted" style="color:#736a66;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 #ebe3df;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;;white-space:nowrap;">$31.00</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #ebe3df;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/noodle-dumplings.png" alt="Three steamed dumplings on a dark plate" 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 #ebe3df;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;"><strong>Pork and chive dumplings</strong><br><span class="ete-muted" style="color:#736a66;font-size:13px;">6 pieces</span><br><span class="ete-muted" style="color:#736a66;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 #ebe3df;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;;white-space:nowrap;">$9.50</td></tr><tr><td class="ete-border" width="76" valign="top" style="padding:14px 12px 14px 0;border-bottom:1px solid #ebe3df;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/noodle-tea.png" alt="Milk tea with tapioca pearls and a red straw" 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 #ebe3df;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;"><strong>Brown sugar milk tea</strong><br><span class="ete-muted" style="color:#736a66;font-size:13px;">Less ice</span><br><span class="ete-muted" style="color:#736a66;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 #ebe3df;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;;white-space:nowrap;">$5.75</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:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#736a66;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;">$46.25</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#736a66;">Tax</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;">$4.11</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#736a66;">Tip</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Arial, Helvetica, sans-serif;font-size:15px;line-height:22px;color:#3a3330;">$5.00</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #141010;font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#141010;">Total</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #141010;font-family:Arial, Helvetica, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#141010;">$55.36</td></tr></table></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-panel" style="padding:24px;background-color:#faf6f4;border:1px solid #ebe3df;border-radius:6px;"><h3 class="ete-heading" style="margin:0;font-family:'Courier New', Courier, monospace;font-size:19px;line-height:26px;font-weight:700;color:#141010;text-align:left;mso-line-height-rule:exactly;">Pickup details</h3><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#736a66;">Date</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:22px;color:#3a3330;">Tuesday, 29 September</td></tr><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#736a66;">Ready at</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:22px;color:#3a3330;">6:45 PM, held for 20 minutes</td></tr><tr><td class="ete-muted" width="90" valign="top" style="padding:8px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:22px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#736a66;">Pickup</td><td class="ete-text" valign="top" style="padding:8px 0;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:22px;color:#3a3330;">Noodle Yard, Canal Street<br><span class="ete-muted" style="color:#736a66;font-size:14px;">58 Canal Street, Providence, RI 02903. Use the side window.</span></td></tr></table><div style="padding-top:16px;"><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/map" style="height:48px;v-text-anchor:middle;width:160px;" arcsize="0%" strokecolor="#c81e1e" fillcolor="#c81e1e"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Open map</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/map" style="display:inline-block;background-color:#c81e1e;border:1px solid #c81e1e;line-height:48px;border-radius:0px;color:#ffffff;font-family:Arial, Helvetica, 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;">Open map</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#736a66;text-align:center;">Need to change something? Call us at 555 0167 within 5 minutes of ordering.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#736a66;line-height:20px;text-align:center;"><strong>Noodle Yard</strong><br>58 Canal Street, Providence, RI 02903</p><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#736a66;line-height:20px;text-align:center;padding-top:10px;">Receipt for your online order.</p><p class="ete-muted" style="margin:0;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:21px;color:#736a66;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#736a66;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:Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;color:#736a66;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#736a66;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from SendGrid Email Templates by SendGrid, Inc., MIT license.
About this template
When someone orders takeout, they want to know one thing first: when to show up. This receipt for Noodle Yard, a sample noodle bar, puts the pickup time in big type inside a red panel right under a black logo band.
The order summary lists each dish with a small picture, the options chosen and the price, followed by tax, tip and the total. A pickup panel repeats the date and time and gives the address with a map button. A muted line explains how to change or cancel the order.
Send the receipt within seconds of payment. Put the pickup time in the subject line, because people look for it while walking. Keep dish pictures small and simple so the email loads fast on a phone with weak signal.
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 band
- Pickup time panel
- Order items with pictures
- Tax, tip and total
- Pickup details with map button
- Change order note
- Footer
Subject line ideas
- Pickup at 6:45 PM: order NY-2291 confirmed
- Your Noodle Yard order is in the wok
- Receipt for your takeout order
Preview text idea
Order NY-2291 is confirmed. Pick it up at 6:45 PM at Canal Street.