Post-purchase email template

Trigger the flow on your platform's order event. In Klaviyo that is the Placed Order metric. In Mailchimp it is the "Order is paid" ecommerce event. Then filter to first orders only, so repeat buyers do not get a welcome-to-the-brand message they have already seen. In Klaviyo you set that with a flow filter where Placed Order, Times Received equals 1, or where the First Order property is true. Send this same email to someone who has bought the serum three times and you burn trust on the first line.

Time it two to four hours after the order, not in the same minute as the receipt. The raw transactional receipt belongs to Shopify or your ESP and lands within seconds. You want this email to arrive once the buyer has stopped watching their inbox and the "did my order go through" spike has passed, but before the purchase high fades and they stop opening anything from you. Two hours is the sweet spot in most flows I have run. Twenty-four hours is too late. By then you are competing with the next brand.

This email says one thing: your order is confirmed, here is the timeline, here is the one product that completes it. The mistake I see most is asking for a review at hour two. The box has not arrived. Nobody reviews a serum they have not touched. Save the review request for the post-delivery email at day 7 or day 14, when they have actually used the product. The hour-two email sells the cross-sell, because the buyer is still in buying mode and the shipping box has not closed yet.

The cross-sell is the complementary product, framed as "complete the routine," not "buy more." They bought the vitamin C serum, so the pair is the gel cleanser that lets it absorb. Pull the pairing from your own data, the SKU most often bought in the same order as the trigger item. Expect high intent. In flows I have run, a post-purchase email like this opens in the 40 to 55 percent range, clicks 5 to 12 percent, and converts 2 to 6 percent of recipients on the second item. Your numbers move with margin, list warmth, and how well the pair actually fits.

One button, one job. The CTA here is "Add the Gel Cleanser" with the price on it ($28) and a same-box shipping hook. No category nav bar, no social row above it, no "shop all" link competing for the click. The example copy reads: "We packed your Brightening Vitamin C Serum this morning. It ships within one business day and lands at your door in 3 to 5 days. You will get a tracking link the moment it leaves." Then the cross-sell block, then the button. Anything you add beyond that dilutes the one action you want.

Every column in this template is a nested HTML table with role="presentation", not a div or a flexbox row. Outlook's desktop client renders email with the Word engine, the same one that runs the word processor. Word has no flexbox and mangles floated and inline-block divs, but it has rendered tables reliably since 2007. So the layout is built from table, tr, and td, and it holds its shape in the client that breaks half the emails a hand-coder ships.

Every style is inlined as a style attribute on the element it styles. Gmail strips style blocks from the head on its web client and removes them outright in the Gmail app, so a class that only exists in the head is invisible to the largest inbox in the world. The compile step moves each rule onto its element. You never write the inline CSS by hand; MJML produces it.

The CTA is a bulletproof button. An MSO conditional (<!--[if mso | IE]>) builds a ghost table around a padded anchor, and the td carries a bgcolor plus an mso-padding-alt reset. In Outlook the Word engine draws a solid filled rectangle that stays clickable at its full size, where a plain link would collapse into a thin underline. Corners render square in Outlook and rounded in Gmail and Apple Mail. If a brand contractually needs the rounded corners in Outlook too, that is the one place we drop in the classic v:roundrect VML, but for most brands square-in-Outlook is the right trade.

The headline, the order number, and the button label are live text, not text baked into an image. Outlook and Gmail block images by default on many installs. An image-only header shows up as an empty box with a broken icon, and the reader never sees the one line that matters. Live text also copies cleanly, scales on the reader's phone, and survives if the inbox auto-translates.

Dark mode is defended in the head. A color-scheme and a supported-color-schemes meta, both set to light dark, tells Apple Mail and Outlook-dark to honor the palette you chose instead of inverting the button color into something unreadable. The compile step injects these so you do not have to. Responsiveness comes from a single 480px breakpoint. Above it the two columns sit side by side; below it they stack to full width and the button stretches wide. MJML emits the breakpoint as two rules, but it is one design decision, not a pile of overrides. The font stack leads with Helvetica and Arial, so if you never load a custom font every recipient still sees the same shapes, and there is no missing-font rectangle anywhere.

Copy the compiled HTML for this template. Use the export button on the page, or paste the MJML into the MJML playground and copy the output. You get one self-contained HTML string with all CSS already inlined.

In Klaviyo, create a new flow from scratch, set the trigger to Metric, Placed Order, and add a filter for first order (Placed Order, Times Received equals 1). Drop in an email action, open it, and in the designer add a full-width HTML section (Add Section, HTML). Paste the full HTML into the source. Swap the wordmark, the green and clay hex values, and every href to your domain. Replace the example values with Klaviyo merge tags: {{ first_name|default:'there' }} for the name, {{ order.name }} for the order number, and the cross-sell URL from your catalog.

In Mailchimp, start a Customer Journey on the "Order is paid" starting point, add an email, and choose Code Your Own, then Paste in code. Drop the HTML in. Mailchimp merge tags use different syntax: *|FNAME|* for the name and *|ORDER_NUMBER|* for the order, and the product link points to your connected store's product page. Mailchimp also requires your physical mailing address in the footer for CAN-SPAM, so fill the address line with the real one before you send.

Test before you send, every time. Send a preview to a Gmail inbox (the web client and the app are different renderers), an Apple Mail inbox on an iPhone, and an Outlook desktop inbox. Toggle dark mode on all three. Click the button, do not just eyeball it, because a button can look right and link to nothing. Confirm the merge tags resolved to real values and not a literal {{ first_name }}. Then schedule it for two hours after the order and you are live.