Camera Out for Delivery email template
A bright out for delivery email for a camera shop: centered blue wordmark, order number, a large product photo, the delivery date and a pill 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>Camera Out for Delivery</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-28{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:#6aa8ff!important;}
.ete-border{border-color:#34343a!important;}
.ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
.ete-btn{background-color:#0068ff!important;border-color:#0068ff!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#0068ff!important;}
.ete-btn-outline-text{color:#0068ff!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:#6aa8ff!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:#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;">Estimated delivery date: May 19. Track your parcel here. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </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="center" class="ete-px" style="padding:28px 32px 20px;"><span class="" style="font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-0.3px;color:#0068ff;">Frame & Grain</span></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 class="ete-heading ete-ds-28" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:28px;line-height:34px;font-weight:700;color:#242424;text-align:center;mso-line-height-rule:exactly;">Your order is out for delivery</h1></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:#6b6b6b;text-align:center;">ORDER #13432</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:12px 32px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/camera-out-for-delivery-hero.jpg" alt="Silver rangefinder film camera on a window sill with pink flowers behind" width="536" height="360" class="ete-fluid" style="display:block;width:536px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;margin:0 auto;"></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#242424;text-align:center;">Your order with 1x <b>Rangefinder 35 Classic</b> is out for delivery. Track your shipment to see the delivery status.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#242424;text-align:center;">Estimated delivery date: <b>May 19, 2026</b></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/track/13432" style="height:48px;v-text-anchor:middle;width:217px;" arcsize="50%" strokecolor="#0068ff" fillcolor="#0068ff"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Track my shipment</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/track/13432" style="display:inline-block;background-color:#0068ff;border:1px solid #0068ff;line-height:48px;border-radius:24px;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 class="ete-btn-text" style="color:#ffffff;">Track my shipment</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:#6b6b6b;text-align:center;">Courier tracking number: <a class="ete-link" style="color:#0068ff;text-decoration:underline;" href="https://example.com/track/784530212469">784530212469</a></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:#6b6b6b;line-height:20px;text-align:center;"><strong>Frame & Grain</strong><br>18 Lens Street, Leeds LS2 7EW</p><p class="ete-muted" style="margin:0;font-family:Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6b6b6b;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6b6b6b;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:#6b6b6b;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6b6b6b;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 delivery notification) by usewaypoint, MIT license.
About this template
A shipping update for a camera, electronics or gadget store on the day the parcel leaves the depot. It is centered, airy and built around one large photo of the product the customer ordered.
A blue wordmark opens the email, followed by a light headline that says the order is out for delivery and a tiny order number underneath. The product photo fills the width, so people recognise their purchase before they read a word.
Below the photo, one sentence names the item, a second line shows the estimated delivery date in bold, and a blue pill button opens the live tracking page. The courier tracking number sits in small type at the end for anyone who wants to paste it somewhere else.
Swap the photo for the main item in each order, or use a category photo when an order holds several products.
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
- Headline and order number
- Product photo
- Delivery date
- Tracking button
- Tracking number
- Footer
Subject line ideas
- Your camera is out for delivery
- Arriving today: order #13432
- {{first_name}}, your parcel is on the van
Preview text idea
Estimated delivery date: May 19. Track your parcel here.