Order Confirmation Email for Ecommerce

Trigger and timing. In Klaviyo this fires off the Placed Order metric, which Shopify pushes the moment checkout completes. The email should land inside 60 seconds. Buyers expect it instantly. Delay it and you hand the did-my-order-go-through anxiety straight to your support inbox, which is where DTC brands lose margin on WISMO tickets.

Why the open rate is this high. Order confirmations run 60 to 75 percent open in Klaviyo benchmarks because they are transactional and expected, and they are exempt from the consent rules that throttle marketing. That makes this the most reliable touchpoint in the program, so it has to earn its space instead of phoning in a receipt.

What belongs in the body: - Order number and date up top, scannable. Order #1042, placed June 27. - The item list with variant specifics. DTC buyers order variants: size, color, fragrance, wick type. Show them. Cedar & Smoke Candle, 8oz, Qty 1 beats 1x Candle. It cuts refund-causing mistakes. - Verified totals. Subtotal, shipping, tax, the discount code applied, and the total. Show the discount line even when it stings. Hiding it breaks trust. - A shipping ETA window, not a fake date. Leaves our Portland studio in 1 to 2 business days. Estimated delivery June 30 to July 2. Windows beat lies. They cut WISMO tickets, which for a mid-size DTC brand can run into the hundreds per week. - The shipping address echoed back. Buyers catch their own mistakes before the parcel leaves the dock. One echoed address line saves a replacement shipment and a support reply.

The copy angle. Reassure first, then inform. Open with the human line, not the receipt. Real example:

Hi Maya, we got your order (#1042) and we are pouring and packing it now. You will get a shipping email with tracking the moment it leaves our Portland studio.

That line does three jobs. It confirms. It sets a concrete next step. It puts a face on the brand. The receipt follows underneath.

The offer question. DTC founders want to jam a 20 percent discount into the confirmation. Do not. A discount in the receipt trains buyers to wait for the next code and undercuts the purchase they just made. Two moves perform better and protect margin: a referral hook (Give $10, get $10) that turns the buyer into a channel, or a single soft community CTA like SMS restock alerts. Pick one. One CTA, not three.

The CTA. One button. Track my order pointing at a track page, or Manage my order to a self-service portal. Click rate of 10 to 20 percent on confirmations is normal, friction is zero, and it routes buyers away from your inbox.

Numbers to expect. Open 60 to 75 percent. Click 10 to 20 percent. Revenue per recipient is low and that is fine. This email's job is retention and support deflection, not last-touch attribution.

Table-based layout, not divs or flex. Outlook on Windows, versions 2007 through 2021, renders email HTML with Microsoft Word, not a browser. Word does not understand flexbox, CSS grid, or margin collapsing. So every structural block is a nested table, every row a tr, every cell a td. That is non-negotiable if you want the receipt to look the same in Outlook as it does in Gmail.

Inline CSS. Gmail and several mobile clients strip style blocks or clip them past a size threshold. Every visual rule lives on the element it styles, as an inline style attribute. Fonts, colors, padding, borders. No external rules.

Bulletproof VML button. The Word engine ignores border-radius and reliable padding on an a tag, so a normal button renders as a flat underlined link in Outlook. The fix is a VML roundrect wrapped around the button. Non-Outlook clients ignore it. Outlook renders a true rounded rectangle with a working click target. This template ships that pattern.

Live text, not images. Item names, prices, addresses, and the order number are real text. Screen readers read them. Dark mode inverts them cleanly. Buyers can copy them. The only images are the logo and item thumbnails, each with alt text and a fixed width.

Dark mode handling. Apple Mail and Gmail dark mode auto-invert colors and have wrecked many a confirmation. Two head tags tell the client you have considered both schemes: a color-scheme meta set to light dark, plus a supported-color-schemes meta. Combined with explicit hex values instead of named colors, this keeps a candle-brand cream and clay palette from flipping to a muddy gray.

One mobile media query. A single max-width 600px block drops the side padding and stacks the two-column ship-to and help block. One query is plenty. More than one invites Gmail clipping and breakage. Keep it simple.

Web font with a fallback. You can declare a brand web font in the head, but Gmail strips web fonts entirely and Outlook ignores them. Every font declaration carries a fallback stack: the brand font, then Helvetica, then Arial, then sans-serif. The design holds even when the custom face does not load.

Step 1. Copy the HTML, or grab the MJML source first if you want to change the structure. In Mailwright you export both. Take the HTML for a paste-in deployment.

Step 2. Paste it into your ESP. In Klaviyo, open your Placed Order flow, add or open the email, switch the content to a Drag-and-Drop with an HTML block (or use the HTML email type), and paste the full document into the source. In Mailchimp, start a campaign, choose Code Your Own, then Paste in code, and drop the HTML in.

Step 3. Swap brand, colors, and links. Find the logo text Hearth & Hush, the clay button hex b6533f, the cream background f6f1ea, and the track-page URL. Replace each with your client's assets. Keep the structure intact.

Step 4. Wire the merge tags. This is the part that turns a static template into a live confirmation.

Klaviyo (Shopify-connected), real tags: - Subject: Your {{ organization.name }} order {{ event.extra.order_number }} is confirmed - First name: {{ first_name|default:"there" }} - Order number: {{ event.extra.order_number }} - Item loop: {% for item in event.Items %} {{ item.product.name }}, {{ item.quantity }}, {{ item.line_price }} {% endfor %} - Shipping: {{ event.extra.total_shipping }} - Tax: {{ event.extra.total_tax }} - Discount: {{ event.extra.discount_codes }} - Total: {{ event.extra.discounted_total }} - Shipping address: {{ event.ShippingAddress }} - Track link: {{ event.OrderURL }} or /pages/track?order={{ event.extra.order_number }}

Mailchimp (connected store), real tags: - Subject: Your *|STORENAME|* order *|ORDER_NUMBER|* is confirmed - First name: *|FNAME|* - Order number: *|ORDER_NUMBER|* - Order total: *|ORDER_TOTAL|* - Order date: *|ORDER_DATE|* - Receipt URL: *|RECEIPT_URL|* - Shipping address: *|SHIPPING_ADDRESS|* - Product rows: a Mailchimp Product block with *|PRODUCT:NAME|*, *|PRODUCT:QTY|*, *|PRODUCT:PRICE|*

Always check your ESP's current merge tag docs before you send. Platforms rename these between releases.

Step 5. Test before it goes live. Send proofs to Gmail web and the Gmail app on Android and iOS, Apple Mail on macOS and iOS in light and dark mode, Outlook 365 and Outlook.com, and Yahoo if you have volume there. Walk through as a buyer. Confirm the order number pulls through, the totals add up, the address is right, and the track button resolves. Run it through Litmus or Email on Acid if the client pays for it. Manual sends across these clients catch 95 percent of issues.