Style Shop Welcome email template

A welcome email for a fashion shop: a typewriter wordmark, a lakeside photo with big Shop by vibe type, a centered list of style searches and a button.

Light shows the email as designed. Dark and Gmail show how email apps can change its colors.

12 KB, under the 102 KB where Gmail cuts emails

<!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>Style Shop Welcome</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-64{font-size:45px!important;line-height:50px!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:#e8e8e8!important;}
.ete-border{border-color:#34343a!important;}
.ete-panel{background-color:#26262b!important;border-color:#34343a!important;}
.ete-btn{background-color:#ffffff!important;border-color:#ffffff!important;}
.ete-btn-text{color:#191a1a!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:#d4d4d6!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9c9ca3!important;}
[data-ogsc] .ete-link{color:#e8e8e8!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:Georgia;mso-hansi-font-family:Georgia;mso-bidi-font-family:Georgia;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:Georgia;mso-hansi-font-family:Georgia;mso-bidi-font-family:Georgia;}
.ete-f-anton{mso-ascii-font-family:Impact;mso-hansi-font-family:Impact;mso-bidi-font-family:Impact;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&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;">Ready for a whole new way of shopping? Start with a vibe. ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏ </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="ete-heading ete-hf" style="font-family:'Courier New', Courier, monospace;font-size:24px;line-height:30px;font-weight:700;letter-spacing:1px;color:#191a1a;">loomline</span></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:15px;line-height:24px;color:#191a1a;text-align:center;">Hi {{first_name}}, welcome to Loomline.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:15px;line-height:24px;color:#191a1a;text-align:center;">Ready for a whole new way of shopping?</p></td></tr>
<tr><td bgcolor="#4f7fa8" background="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/style-shop-welcome-hero.jpg" valign="top" style="background-color:#4f7fa8;background-image:url('https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/style-shop-welcome-hero.jpg');background-position:center center;background-size:cover;background-repeat:no-repeat;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;"><v:fill type="frame" src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/style-shop-welcome-hero.jpg" color="#4f7fa8" /><v:textbox inset="0,0,0,0"><![endif]--><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-px" valign="bottom" align="center" height="400" style="height:400px;padding:48px 6.67%;mso-padding-alt:48px 40px;text-align:center;background-color:rgba(0,0,0,0.1);"><h1 class="ete-ds-64 ete-f-anton" style="margin:0;font-family:Anton, Impact, 'Arial Narrow Bold', sans-serif;font-size:64px;line-height:69px;font-weight:400;color:#ffffff;text-align:center;mso-line-height-rule:exactly;text-transform:uppercase;letter-spacing:0.5px;font-size:min(64px,10.67vw);line-height:min(69px,11.5vw);overflow-wrap:anywhere;word-break:break-word;">Shop by vibe</h1></td></tr></table><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h3 class="ete-heading ete-ds-20" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:20px;line-height:24px;font-weight:700;color:#191a1a;text-align:center;mso-line-height-rule:exactly;">Recommended searches near you</h3></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:14px;line-height:22px;color:#191a1a;text-align:center;"><a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/streetwear">Streetwear in the city</a><br>
<br>
<a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/denim">Denim on denim</a><br>
<br>
<a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/concert">Outfits for a live concert</a><br>
<br>
<a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/dinner">Classic looks for a dinner date</a><br>
<br>
<a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/boho">Relaxed boho style</a><br>
<br>
<a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/rain">What to wear on a rainy day</a><br>
<br>
<a class="ete-link" style="color:#191a1a;text-decoration:underline;" href="https://example.com/s/workwear">Workwear that feels like weekend</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/shop" style="height:48px;v-text-anchor:middle;width:217px;" arcsize="50%" strokecolor="#191a1a" fillcolor="#191a1a"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Discover Loomline</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/shop" style="display:inline-block;background-color:#191a1a;border:1px solid #191a1a;line-height:48px;border-radius:24px;color:#ffffff;font-family:Georgia, 'Times New Roman', 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;">Discover Loomline</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:Georgia, 'Times New Roman', serif;font-size:12px;line-height:19px;color:#6b6b6b;text-align:center;"><i>Reply to this email and a stylist will write back.</i></p></td></tr>
<tr><td align="center" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Georgia, 'Times New Roman', serif;font-size:13px;line-height:21px;color:#6b6b6b;line-height:20px;text-align:center;"><strong>Loomline</strong><br>71 Weaver Street, Manchester M4 6BX</p><p class="ete-muted" style="margin:0;font-family:Georgia, 'Times New Roman', 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:Georgia, 'Times New Roman', 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>

Categories: Welcome Onboarding
Industry: Ecommerce
Type: Automated
Size: 12 KB, 600 px wide

Adapted from Waypoint responsive transactional email templates (ecommerce welcome) by usewaypoint, MIT license.

About this template

A welcome email for a fashion marketplace or personal styling service. It skips the usual feature list and invites people straight into browsing.

A typewriter style wordmark and two short lines of greeting lead into a wide photo of a woman looking out over a lake, with Shop by vibe set in tall white capitals across the bottom of the image.

Below the photo, a centered list of underlined searches works like a menu of moods: streetwear, denim, concert outfits, dinner dates, boho, rainy days and relaxed workwear. Each line is a link, so people tap the one that fits them.

A black pill button opens the shop and a small italic line offers a reply from a stylist. Change the searches to your own top categories or local trends.

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
Greeting
Photo hero with display type
Recommended searches
Shop button
Stylist line
Footer

Subject line ideas

Welcome to Loomline, {{first_name}}
Shop by vibe, starting today
Your new way to shop is here

Preview text idea

Ready for a whole new way of shopping? Start with a vibe.