Browse Abandonment Email for Fashion

Klaviyo's Viewed Product metric fires the moment a cookied browser loads a product detail page. Point the flow at that metric, suppress anyone who also fired Added to Cart or Placed Order in the same session, and cap frequency to one email per product per 14 days so a shopper browsing the summer dress collection does not get six emails in a week. In Mailchimp the equivalent is the Product Activity e-commerce event inside an automation.

Send the first email at 2 hours. Apparel purchases are impulsive but fit-sensitive, so you want to land while the item is still in the shopper's working memory, after they have stepped away but before the day ends. Add a second touch at 24 hours for the deliberators. Do not copy the 1-hour cadence you use for cart abandonment. Browse shoppers have signaled less intent, and a push that fast reads as surveillance.

Lead with no discount. The first email earns the click by removing doubt, not by cutting price. Apparel gross margins sit between 60 and 75 percent, so you can afford 10 percent on the second touch if the shopper still has not engaged, but leading with a discount trains people to wait for it. Hold the incentive in reserve.

Name the fit objection first. The product block opens with the line "Model is 5'9 and wears size S. True to size through the hip, relaxed through the leg." Put the return policy beside the price, because returns are the unstated blocker in apparel. Then add one styling suggestion, a complete-the-look piece at a lower price point. That reframes the viewed item as part of an outfit and lifts average order value.

Apparel browse abandonment flows typically pull a 1.5 to 3.5 percent click-through rate and a 0.4 to 0.8 percent placed-order rate per send. The per-touch numbers sit below cart abandonment, but aggregate volume is higher because browse traffic dwarfs add-to-cart traffic. In client tests, adding the model-and-fit line to the product block has lifted click-through 10 to 20 percent.

The CTA names the item. "Shop the pant" beats "Shop now" because it removes the cognitive step of remembering what the shopper was looking at. Keep it to four words.

Gmail clips messages over 102 kilobytes and strips style blocks from the body. Apple Mail renders cleanly but ships with a dark mode that repaints your background. Outlook 2016 through 365 runs on the Word rendering engine, which ignores border-radius, padding on anchors, and most of CSS. The HTML this template exports is engineered for all three.

The layout is nested HTML tables. Every section is a table, every column a nested table, every cell a td. There are no divs, no flexbox, no CSS grid. Word understands tables and almost nothing else, so the two-column product block holds its shape in Outlook the same way it holds in Gmail.

Every style is inline. Color, font-size, padding, and line-height travel on the element itself. Gmail ignores most head styles for properties it does not natively support, and inlining means the design survives the strip.

The button is a bulletproof VML button. The MJML compiler emits the v:roundrect and mso markup the Word engine needs to draw a padded, clickable button. Outlook shows a filled rectangle with correct padding. Gmail and Apple Mail show the rounded version. No image fallback, no broken anchor.

Every headline, price, and fit line is live text, not an image. Screen readers read it, Outlook displays it, and dark mode inverts it correctly. The only images in the email are the product photographs themselves.

The head carries a color-scheme meta and one prefers-color-scheme media query. Apple Mail and iOS Mail honor it, flipping the cream background to a matched dark tone and holding the clay accent so the brand still reads in inverted mode.

The font stack opens with system faces: -apple-system, Segoe UI, Helvetica, Arial. Gmail replaces any web font with Arial, and older Outlook swaps in Times New Roman, so the layout never depends on a custom typeface to hold its proportions.

One media query at max-width 480px drops the headline size and stacks the two-column product block into a single column. Apple Mail, iOS Mail, and the Gmail app respect it. Outlook ignores it, which is fine, because the table structure already degrades gracefully.

Klaviyo. Open the email in the drag-and-drop editor and drag an HTML block into the product section. Paste the exported HTML. Then replace the placeholder tags with Klaviyo event variables. For a Viewed Product triggered flow, the viewed item arrives as event variables: {{ event.VariantName }} or {{ item.title }} for the name, {{ item.price }} for price, {{ item.url }} for the link, {{ item.image.src }} for the photo. For the greeting use {{ first_name|default:'there' }}. Replace the six Halden Studio hex values with your client's palette, swap the logo text and product copy for the brand voice, and point the image src at the client's hosted photo or leave {{ item.image.src }} to pull from the Klaviyo CDN.

Mailchimp. Start a campaign, choose Code Your Own, then Paste in code. Paste the HTML. Replace the tags with Mailchimp e-commerce merge tags: *|FNAME|* for the name, and the product block uses *|PRODUCT_NAME|*, *|PRODUCT_PRICE|*, *|PRODUCT_URL|*, and *|PRODUCT_IMG_URL|* inside a Product Recommendations block. Change colors and copy the same way.

Test checklist. Send a real send to one address on each: Gmail web (watch the 102kb clip), Gmail app on iOS, Apple Mail on macOS in light and dark, Outlook 365 on Windows, Outlook 365 on Mac, Samsung Mail. Klaviyo and Mailchimp both offer inbox previews, but neither covers Apple Mail dark mode, so a live send to an Apple device is the only reliable check. The VML button is the one component that breaks if a stray div sneaks in, so keep the structure tables-only when you edit.