Welcome Email for Ecommerce (Klaviyo & Mailchimp Ready)

Most ecommerce welcome emails fail at the trigger. They fire on account creation at checkout, which catches logged-in return buyers instead of fresh list signups. Point this welcome at the newsletter pop-up and the footer signup form, where intent is new and the subscriber is still deciding whether to buy.

Send it within the first minute. Welcome emails sent on signup open at roughly 50 to 60 percent, about four times the open rate of a standard promotional send. Most opens happen in the first hour. Wait a day and that attention is gone.

Lead with the offer. For DTC, a 15 percent first-order discount converts better than free shipping alone, but discount plus a free-shipping threshold (say, $40) beats either because it lifts basket size at the same time. Put the code in the subject line and the preheader so it survives image-off reading and Gmail clipping.

Subject: Your 15% code is inside, {{ first_name|default:'friend' }} Preheader: WELCOME15 at checkout, plus free shipping over $40.

Keep copy in a retail tone. Set expectations in three lines so subscribers know what they signed up for and stay engaged past the first send: early access to new single-origin drops before they hit the site, restock alerts on the small-batch roasts that sell out fast, and subscriber-only deals about twice a month (no daily noise). One short shipping line, free over $40 and roasted to order within 24 hours, answers the question every new coffee buyer asks first.

Use one shop CTA. Send it to your bestseller or new-arrivals collection, never the homepage. A homepage CTA forces a second decision and cuts click-through. The format pays off: welcome emails drive roughly 3x the revenue per email of standard promotional sends, and extending to a short series of 3 to 5 emails typically lifts that further.

This template is built as nested HTML tables, not divs or flexbox. Outlook runs on the Word rendering engine, which ignores flex, grid, and most CSS positioning. Gmail strips <style> blocks above the body on some clients. Tables survive both.

Every element carries inline CSS. A single <style> block is unreliable across webmail, so each cell, text block, and link gets its styling written on the element itself. The rendered HTML from the MJML below already follows this rule.

The button is a bulletproof VML button. Outlook would otherwise flatten a CSS button into a plain text link. The button is wrapped in Microsoft VML (Vector Markup Language) inside MSO conditional comments, so Outlook draws it as a solid colored rectangle with a working link, matching what Gmail and Apple Mail render.

Copy is live text, not images. Live text scales on the reader's device, passes spam-filter checks, and loads instantly on slow connections. Image-only emails land in spam more often and hide the offer from anyone who has images off by default.

Dark mode is handled with a color-scheme meta tag plus a media query. Apple Mail and Outlook dark mode will invert light backgrounds and recolor your button if you leave them to guess. The meta tag tells the client your palette is dark-aware, and the media query hands dark mode a tested set of colors.

There is one mobile media query, capped at 600px. Stacked breakpoints break in Gmail mobile, which clips anything complex. One breakpoint keeps the layout predictable across the apps your subscribers actually use. Web fonts fall back to a Helvetica and Arial stack so the email still reads clean when the custom font does not load.

Copy the HTML from this page, or copy the MJML source below and export it through the MJML app. Then open your ESP and paste it in.

Klaviyo: open the flow email or campaign, drag an HTML block into the canvas, and paste the code. For a drag-and-drop email, add a Code block where you want the welcome to sit. Save and continue to the preview.

Mailchimp: start a campaign, choose Code your own, then Paste in code, and drop the HTML in. In the regular builder, add a Code content block and paste there.

Swap the brand before you send. Replace the logo text, the brand name in the header, and the link colors. Three colors carry this design: the dark header green (#1F3D2E), the cream body (#FAF6EF), and the terracotta button (#B85C2E). Find them on the button cell (background-color), the section backgrounds, and the link color.

Wire the merge tags for personalization and ecommerce data: - First name. Klaviyo: {{ first_name|default:'friend' }}. Mailchimp: *|FNAME|*. - Discount code. Klaviyo can generate a unique code per recipient through its coupon feature; otherwise hard-code WELCOME15. Mailchimp: insert a promo code merge tag or hard-code it. - Product recommendations. Klaviyo: drop a Product block and pick a feed (bestsellers, recently viewed). Mailchimp: use the Product Recommendations block. - Unsubscribe. Klaviyo: {{ unsubscribe_url }}. Mailchimp: *|UNSUB|*. Both are required for CAN-SPAM and CASL compliance.

Test before you schedule. Send a proof to Gmail (web and the mobile app), Apple Mail in light and dark mode, and Outlook on Windows, which runs the Word engine. Run the HTML through Litmus or Email on Acid for a full client matrix. Click the CTA from each inbox, then place a test order on your own store with WELCOME15 to confirm the discount applies.