Order Confirmation Email Template

The trigger is the checkout event itself. In Shopify that is order/create, in Klaviyo it is the Placed Order metric, in Stripe it is the payment_intent.succeeded webhook. The email fires within seconds, not after a 15-minute delay, because the customer is sitting on a thank-you page wondering whether the order actually went through. That anxiety is why confirmations routinely clear 60% open rates and often push past 70%, four to six times what a promotional send earns.

The single message is reassurance plus a receipt. Sarah needs three things in the first scroll: her order number, what she bought with line items and prices, and when it will arrive. Everything else is secondary.

Hold the upsell. A confirmation is the worst place to push a hard cross-sell, because the customer just spent money and trust is thin. A light companion nudge works better. Halcyon Coffee pairs the receipt with a one-line note that beans ship within 24 hours and a single Track my order button. That button typically pulls a 12 to 15% click rate, because it answers the one question the customer has right now.

Keep the CTA to one button. Two buttons split clicks and confuse the action. Example copy that performs well above the headline:

Thanks, Sarah. We're on it. Your order went through. We roast to order, so your beans ship within 24 hours.

Below that goes the itemized list, the totals block, the shipping address, and the ETA. The arrival date should be a specific day like Arrives by July 1, never a vague window, because a concrete date cuts support tickets.

The HTML under this email is built on nested table elements, not div or flexbox. Email clients are not browsers. Outlook desktop on Windows renders mail through Microsoft Word's engine, which ignores flexbox and grid, throws out most style-block rules, and mishandles padding on a div. Tables are the one layout primitive every client understands, so the whole email is a stack of single-row, fixed-width tables.

Every CSS rule is inlined on the element it styles. Gmail strips style blocks from the head on many accounts, and Outlook ignores class-based styling on anything but the simplest selectors. Inlining puts the font-size, color, and padding directly on the td, so the styling survives both clients.

The primary button uses bulletproof VML. Inside an mso conditional, a v:roundrect draws a real filled, rounded rectangle that Word can render, with a w:anchorlock so the entire shape is clickable. Non-Outlook clients see the normal a tag styled with background-color and border-radius. Skip this and Outlook shows a flat rectangle with no fill and a link that only works when the cursor lands on the text exactly.

All text is live text, not text burned into an image. Gmail and Outlook block images by default on first open, so image-based text means a blank rectangle for the first impression. Item names, totals, and the shipping address are real text, so the email reads correctly before any image loads.

Dark mode is handled with a color-scheme meta tag in the head. Apple Mail and Outlook dark modes read meta name="color-scheme" content="light dark" and invert thoughtfully instead of mangling the palette. Web fonts declare a fallback stack that ends in Arial, because only Apple Mail loads hosted fonts; every other client falls back to Helvetica or Arial without breaking the layout.

A single max-width:480px media query handles mobile. One query keeps the file small and avoids the rendering bugs that creep in when a developer stacks five breakpoints. It collapses the item rows from three columns to stacked blocks and lets the thumbnail grow on a narrow screen. Gmail and Apple Mail respect it; sections were already stacking, because MJML columns reflow at 600px by default.

Copy the HTML first. If you are editing the MJML, compile it with the MJML CLI (mjml order.mjml -o order.html) or the in-browser compiler, then copy the resulting HTML.

In Klaviyo, open Flows, create a new flow, choose the Placed Order metric as the trigger, and drop in an Email action. Open the email, skip the template gallery, and choose Import HTML. Paste your compiled HTML. Klaviyo keeps the HTML intact rather than re-rendering it through a drag-and-drop layer, which is what you want for a table-based layout.

In Mailchimp, start a campaign, select Email, then under the design step choose Code Your Own and Paste in code. Paste the HTML into the editor. Mailchimp preserves tables and inline styles.

Swap the brand next. Replace the logo image URL, the two brand hex values in the mj-all defaults, and every link. The two-color change cascades through the whole email, because the buttons and the headlines both reference those tokens.

Wire in the merge tags. In Klaviyo, swap the static order number for {{ event.order_number }}, loop the items with {% for item in event.extra.line_items %}, and output totals with {{ event.extra.subtotal }}. In Mailchimp, use *|ORDER_NUMBER|* and the *|PRODUCT:|* repeat block for line items, or pull the receipt from your store integration. The shipping address and tracking link each have their own merge tags in both platforms.

Test before you send. Trigger a real test from a staging order, not just a preview. Open it in Gmail on desktop and in the Gmail app, in Apple Mail on an iPhone in both light and dark mode, and in Outlook on Windows. Confirm the VML button fills with the brand color in Outlook, that item images load, and that nothing clips. If a client shows a gap where the button should be, the VML conditional is the place to look.