Shipping Update Email for Ecommerce

The shipping confirmation is not a receipt. It is a high-trust, high-open moment, and DTC brands that treat it like backend plumbing leave revenue and retention on the table. Open rates of 50 to 65 percent are normal here, and click-through on the tracking link often clears 35 percent. By reach, this email sits behind only the order confirmation.

Trigger and timing. Wire the email to the Shopify fulfillment event, not the order placed event, and send it inside five minutes of the label being generated. Shoppers expect the tracking email while they are still thinking about the purchase. Wait a day and you lose the anticipation window and open a support ticket. For subscriptions, fire the same email on every renewal fulfillment so the experience stays consistent and churn stays low.

What to include that is specific to DTC. Lead with the tracking link as the one clear CTA. Give an honest date range (Sun, Jun 29 to Tue, Jul 1), not the carrier's default "3 to 5 business days." Show the carrier, order number, and the exact line items in the box. For perishable or functional goods, add storage and use-by guidance: coffee stays fresh in the bag for about six weeks past the roast date; skincare goes in a cool, dry place. That single block cuts "is this normal?" tickets sharply.

Copy angle. Sell anticipation, not hype. Ground the customer in the real journey: "Packed today at our Brooklyn roastery." Specifics beat adjectives every time. Skip the upsell here. The right moment to cross-sell is the delivered email two days later, when the product is in hand and the review request lands alongside it.

The number for the client deck. A shipping email with a live tracking link and a real ETA cuts WISMO ("where is my order?") tickets by 25 to 40 percent across most DTC catalogs. That is the line item that justifies building this email properly instead of shipping the ESP default.

Klaviyo and Mailchimp both pass your HTML straight through to the inbox. What you paste is what Gmail renders. So the markup has to survive three hostile renderers: Gmail's aggressive CSS stripping, Apple Mail's dark-mode color inversion, and Outlook's Word engine that ignores flexbox and border-radius.

Nested tables, not divs. Every layout block is built from nested HTML tables at fixed pixel widths. This is the only structure that holds a 600px column reliably across Outlook 2007 through 2021 on Windows. Divs and flex collapse or reflow. Tables do not.

Inline CSS. Gmail strips the head stylesheet on most clients, so every color, padding, and font-size lives as an inline style on the element it controls. No shared stylesheet carries critical styling.

Bulletproof VML button. Outlook draws buttons as flat gray rectangles because it cannot do border-radius. A VML fallback renders the green button as a true rectangle with working padding and a live link inside the Word engine. Apple Mail and Gmail show the rounded version. Both click through to the same tracking URL.

Live text over images. Headline, tracking number, ETA, and order details are real text. Outlook blocks images by default, and Apple Mail dark mode turns any text baked into a PNG into a muddy mess. Real text stays crisp, readable, and selectable.

Dark-mode color-scheme meta. A color-scheme meta tag in the head tells Apple Mail the email is dark-mode aware, so the client does not auto-invert your green and cream palette to neon. Your brand colors survive both themes.

One mobile media query. A single max-width 480px block handles the two things that break on a phone: it shrinks the hero headline and loosens the padding on the ETA box. No framework, no grid. One media query, scoped tight.

Web-font fallbacks. The headline loads Inter where the client supports web fonts and falls back to the system sans (Helvetica, Arial) everywhere else. No missing-glyph squares, no layout shift on load.

1. Copy the HTML. Export from MJML, or copy the compiled output. One file, no external assets beyond the web font link.

2. Klaviyo. Build a metric-triggered flow on "Fulfilled Order." Add an email, open the source view, and paste the HTML. Swap the brand name, the green (#0f7a4f), the logo, and the support address. Then wire the merge tags so the email fills itself per shipment: - Button href (tracking link): {{ event.extra.fulfillment.tracking_url|default:'https://track.coastlinecoffee.com' }} - Carrier: {{ event.extra.fulfillment.tracking_company }} - Tracking number: {{ event.extra.fulfillment.tracking_number }} - Order number: #{{ event.order_number }} - Line items: loop the {{ event.items }} array inside the order table Variable names shift between Shopify, WooCommerce, and Custom integrations, so confirm the exact payload in the flow's Preview panel before you push the flow live.

3. Mailchimp. For a code-based campaign, choose Campaigns, then Create, then Email, then Code your own, then Paste in code, and drop in the HTML. Swap the same brand, color, and link tokens. Wire Mailchimp merge tags: - Tracking number: *|TRACKINGCODE|* - Carrier: *|SHIPPER|* - Order number: *|ORDERNO|* For connected-store transactional shipping emails, Mailchimp maps these fields automatically from your Shopify or BigCommerce sync.

4. Test before you send. Push a preview to a real Gmail inbox (web and Android app), Apple Mail in light and dark mode, and Outlook on Windows. Confirm three things: the button clicks through, the tracking number is selectable text, and the ETA box reads correctly in dark mode. Fix, re-test, then switch the flow live.