Browse Abandonment Email for Beauty Brands That Wins Back Shade Shoppers

A beauty shopper viewed your foundation, compared three shades, and left without the Add to Cart. This template brings them back with shade guidance and ingredient trust, not a lazy discount.

Open the full email ↗ Get this on your brand

Live preview View HTML ↗

What makes this browse abandonment work for beauty / cosmetics

Trigger on Viewed Product with no Started Checkout event after it. In Klaviyo, set the flow filter to Viewed Product at least once times Started Checkout zero times, so the email reaches browsers rather than cart abandoners who already have their own flow.

Timing fits how beauty buyers shop. They compare shades, read INCI lists, and check reviews for their skin type before they commit. Send the first email 2 to 4 hours after the view, or next morning if they browsed late at night. Beauty browse flows that wait past 24 hours lose the shade memory and fall out of the consideration window. A two-email cadence (first send at 3 hours, second at day 2 with social proof) typically beats a single send by 20 to 30 percent on click rate, based on Klaviyo benchmark patterns.

Resist the instant discount. Fifteen percent off a shade they have not matched trains them to wait for the coupon on every visit. Lead with shade tools instead: a find-your-shade quiz, a free shade exchange guarantee, or a swatch photo across four skin tones. Hold the discount for email two or three if they still have not converted.

The copy answers the doubts that kill beauty purchases. Will this shade match me? Is the finish right for my skin type? Are these ingredients safe? Surface the shade name they viewed, the finish (matte, satin, dewy, luminous), and a dermatologist-tested or fragrance-free badge. Name one key active like niacinamide, squalane, or hyaluronic acid so the formula earns trust.

Use one shade-centric CTA. 'See it on your skin tone,' 'Find your exact shade,' or 'Shop Carmel.' Keep it under 25 characters so it stays on one line in the mobile preview pane.

Real copy that converts: Subject: Still thinking about Dewy Glaze in Carmel? Preview text: See how it wears on four skin tones, then grab your shade. Body opener: You spent time on Satin Lip in Carmel. Here is the finish, the shade depth, and why it lasts 8 hours without drying.

Numbers to expect. Beauty browse abandonment emails run 30 to 45 percent open and 2 to 4 percent click when they lead with shade content. Lead with a discount and click rate usually falls to 1 to 2 percent. Product-view flows sit in the top three revenue flows for DTC beauty brands, behind only welcome and cart abandonment.

Why it renders in every inbox

The layout is nested HTML tables, not divs or flexbox. Outlook (Word engine), Gmail, and Yahoo all expect table-based structure. The build uses a container table, row tables, and column tables nested three to four levels deep. This is the only structure that holds across Outlook 2016 through 2021 and the Windows Mail app.

Every style is inline. Gmail strips <style> blocks for POP and IMAP accounts, and several clients ignore <head> CSS. Font size, color, padding, and background all live as inline style attributes on the element they affect.

The CTA uses a bulletproof VML button for Outlook. Outlook renders CSS buttons as flat underlined text with no fill. The button carries mso VML markup (Microsoft Vector Markup Language) so it stays a filled, rounded, clickable rectangle in Outlook 2007 through 2021. Skip the VML and your 'Find Your Shade' button collapses to plain text in Outlook.

Body copy is live text, not image slices. Beauty brands lean on hero product shots, but the headline, shade name, price, and CTA are real text. Gmail clips messages over roughly 102 KB, and image-only emails land in spam. Live text keeps the file under the clip limit and stays readable with images disabled.

The head carries dark-mode color-scheme meta: <meta name="color-scheme" content="light dark"> and <meta name="supported-color-schemes" content="light dark">. Apple Mail dark mode inverts dark backgrounds. The meta tells the client which palette to honor, and a targeted inline override protects the shade swatch row from color inversion.

One mobile media query lives in the <style> block. At max-width 600px it bumps the body font size, stacks the two-column shade grid into one column, and pads the button for thumbs. One query only, because Gmail strips media queries for non-Gmail accounts and older Android clients ignore them anyway.

Web fonts stack with fallbacks. A brand font like Graphik or Sohne loads through a font-face declaration, but every text element falls back to Arial, Helvetica, sans-serif. Outlook ignores web fonts and drops to the fallback with no broken-glyph boxes.

How to use it in Klaviyo or Mailchimp

Copy the HTML. Compile the MJML at mjml.io or with the MJML CLI, then copy the output.

Klaviyo: open your flow email, drag an HTML block into the canvas, and paste. For a full-email build, use a Universal email with an HTML source. Save.

Mailchimp: create a campaign, choose Code your own, then Paste in code. Drop in the HTML. Save it as a template so you can reuse it across shade drops and seasonal launches.

Swap the brand assets. Replace the Halden & Hue logo URL, the rose (#C8536A) and charcoal (#2B2B2B) colors, and every product link. Update the shade name, the swatch image, and the price. Keep the table structure intact. Change only text, colors, and image URLs.

Wire the merge tags.

Klaviyo: First name: {{ first_name|default:"there" }} Viewed product name: {{ event.Products.0.Name }} Viewed product image: {{ event.Products.0.ImageURL }} Viewed product URL: {{ event.Products.0.URL }} Price: {{ event.Products.0.Price|floatformat:2 }} Sample line: {{ first_name|default:"Beautiful" }}, you were eyeing {{ event.Products.0.Name }} in Carmel.

Test before send. Run renders through Litmus or Email on Acid against Gmail (web, iOS, Android), Apple Mail, and Outlook 2019 and 2021. Toggle dark mode in Apple Mail and Outlook mobile. Confirm the VML button fills in Outlook. Click through the merge tags to confirm the viewed product populates. Send a live test to your own inbox and open it with images on and off.

Questions

Is this browse abandonment template free for my beauty brand? +

Yes. The MJML and compiled HTML are free to use for your brand or your agency clients. Rebrand it, rewrite the copy, and ship it. No license fee. Paid work starts only if you want Mailwright to generate the next email from a client brief.

Will the shade swatches and the CTA render in Outlook? +

The CTA uses VML, so it stays filled and clickable in Outlook 2007 through 2021. Shade swatches sit in nested tables with inline background colors, which Outlook renders reliably. Outlook ignores web fonts, so the headline falls back to Arial and stays legible.

How do I match the colors to my beauty brand? +

Edit hex values in two places. In the MJML, update the defaults inside <mj-attributes>. In the compiled HTML, update the inline styles. Swap #C8536A (rose) and #2B2B2B (charcoal) for your palette, then update the button, the section dividers, and the swatch borders in one pass. Keep body text contrast above 4.5:1 for accessibility.

Do I need to know HTML to use this? +

No. Paste the compiled HTML into Klaviyo or Mailchimp and edit only text, image URLs, and hex colors. A developer can adjust spacing or add a shade column in the MJML if needed. The template is built so non-coders can ship it and coders can extend it.

Want this on your client's brand?

Paste a client's site and we build a real, on-brand sample in clean, ESP-safe HTML you can paste into Klaviyo.

Get a free sample