Food Delivery Receipt email template
A food delivery receipt with a green header band, the dishes and fees in a clear list, the card charged and total, a short hold note and a rate button.
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>Food Delivery 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;}
}
@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:#6fd581!important;}
.ete-border{border-color:#34343a!important;}
.ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
.ete-btn{background-color:#40ba54!important;border-color:#40ba54!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#40ba54!important;}
.ete-btn-outline-text{color:#40ba54!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:#6fd581!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;}
body,table,td,th,p,a,span,div,li{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
.ete-f-montserrat{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f6f8f6;">
<!-- 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;">Here is your receipt for Corner Slice Pizza. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f6f8f6;">
<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;background-color:#40ba54;"><span class="" style="font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:18px;line-height:23px;font-weight:700;letter-spacing:-0.3px;color:#ffffff;">Basil Run</span></td></tr>
<tr><td class="ete-px" bgcolor="#40ba54" style="background-color:#40ba54;padding:24px 32px 8px;"><h2 class="ete-ds-24" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:29px;font-weight:700;color:#ffffff;text-align:left;mso-line-height-rule:exactly;">Thanks for ordering, {{first_name}}</h2></td></tr>
<tr><td class="ete-px" bgcolor="#40ba54" style="background-color:#40ba54;padding:8px 32px;"><p style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#ffffff;text-align:left;">Here is your receipt for Corner Slice Pizza.</p></td></tr>
<tr><td height="16" bgcolor="#40ba54" style="background-color:#40ba54;height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:16px;"><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;"><strong>Jumbo wings</strong><br><span class="ete-muted" style="color:#7a7b7c;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:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;;white-space:nowrap;">$12.00</td></tr><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #eaeaea;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;"><strong>Margherita pizza</strong><br><span class="ete-muted" style="color:#7a7b7c;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:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;;white-space:nowrap;">$20.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:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#7a7b7c;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;">$32.00</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#7a7b7c;">Tax</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;">$2.96</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#7a7b7c;">Service fee</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;">$4.80</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#7a7b7c;">Delivery fee</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:22px;color:#474849;">$4.49</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #1f1f1f;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#1f1f1f;">Visa ending 4070</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #1f1f1f;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#1f1f1f;">$44.25</td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:19px;color:#7a7b7c;text-align:left;">A temporary hold of $44.25 was placed on your card when the order started. It is not a charge and will disappear from your statement shortly. <a class="ete-link" style="color:#2f9a41;text-decoration:underline;" href="https://example.com/help/holds">Learn more</a></p></td></tr>
<tr><td align="center" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center"><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/rate" style="height:48px;v-text-anchor:middle;width:199px;" arcsize="4%" strokecolor="#40ba54" fillcolor="#40ba54"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Rate your order</center></v:roundrect><![endif]--><!--[if !mso]><!--><a href="https://example.com/rate" style="display:inline-block;background-color:#40ba54;border:1px solid #40ba54;line-height:48px;border-radius:2px;color:#ffffff;font-family:Montserrat, '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 style="color:#ffffff;">Rate 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:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:19px;color:#7a7b7c;text-align:center;">Questions? Just reply to this email.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#7a7b7c;line-height:20px;text-align:center;"><strong>Basil Run</strong><br>88 Orchard Road, Sacramento, CA 95814</p><p class="ete-muted" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#7a7b7c;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#7a7b7c;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:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#7a7b7c;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#7a7b7c;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 (marketplace new delivery) by usewaypoint, MIT license.
About this template
A receipt for a food delivery app or a restaurant with its own delivery. It is compact and easy to check against a bank statement.
A green band at the top holds the wordmark, a thank you headline with the first name and the name of the restaurant. The white area below lists each dish with its price, then the subtotal, tax, service fee and delivery fee, and finally the card used and the total in bold.
A short note explains the temporary card hold that customers often ask about, with a link to learn more. A green button asks people to rate the order while the meal is fresh in their mind.
Use it for every completed order. The fee rows can be renamed or removed to match your pricing.
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
- Green header band
- Thank you headline
- Dishes and fees
- Card and total
- Hold note
- Rate button
- Footer
Subject line ideas
- Your receipt from Corner Slice Pizza
- Thanks for ordering, {{first_name}}
- Order delivered: $44.25
Preview text idea
Here is your receipt for Corner Slice Pizza.