Back-in-Stock Email Template

The template is built for a demo beauty brand called AURE, around one product, The Overnight Serum. It does one job: tell people the thing they wanted is back, and get them to buy before it runs out again.

The layout reads top to bottom in one column. It opens with the AURE wordmark and a thin uppercase line, "Skin, on your terms." Right under that sits a small fuchsia "Back in stock" pill, so the reason for the email is clear before anyone reads a word. Then the headline lands: "It's back." set in Bricolage Grotesque at 58px. A short subhead explains the moment in plain language: the serum sold through its first run in nine days, the new batch is small, and you are telling this list first.

Next is the hero product shot with rounded corners, then a clean name-and-price row, "The Overnight Serum" on the left and "$52" on the right. A "why it sold out" paragraph does the selling in honest terms, followed by a small trust line marked with a mint dot: fragrance free, vegan, 4.8 stars from 2,140 reviews.

The discipline is the point. There is exactly one call to action, a fuchsia button reading "Shop now before it's gone." No second offer, no cross-sell, no menu of links competing with it. Below the button, an honest low-stock note ("we made 600 bottles this round, no backorders") creates real urgency instead of a fake countdown. A closing fuchsia band repeats the nudge, "Don't sleep on it," with the shipping and returns terms, then a quiet footer with view-in-browser, the brand address, and unsubscribe links.

The color system is deliberate and small. A white background, off-black ink (#1a1620), one saturated fuchsia accent (#e8467a) used for the pill, the button, and the closing band, plus a single mint micro-accent (#94d4c3). The display type is characterful; the body type is plain Helvetica Neue so it stays readable. One message, one action, one accent color.

Email clients are not browsers. Gmail, Apple Mail, and Outlook each parse HTML their own way, and Outlook still uses Microsoft Word's engine to lay out mail. This template is written for that reality, not against it.

The whole layout is built on nested tables with role="presentation", not divs and flexbox. Every style is inline on the element, because Gmail strips most styles from the document head. The structure is fixed at a 600px container with a mobile media query that stacks rows and turns the button full width on small screens.

The text is live text, not an image of text. The headline, body copy, price, and button label are all real characters, so they stay sharp, stay accessible, and still show if images are blocked. Only the product photo is an actual image, and it carries descriptive alt text.

The button is bulletproof. For Outlook it uses VML (the v:roundrect block) to draw the rounded fuchsia shape with centered white text; every other client gets a padded inline-styled link that looks identical. Outlook also gets the mso conditional table wrapper and a PixelsPerInch fix so spacing and width hold.

For dark mode, the template declares color-scheme and supported-color-schemes as light only, and uses x-apple-disable-message-reformatting, so Apple Mail and others do not auto-invert the fuchsia accent or muddy the white ground. A hidden preheader sets the inbox preview line. There are no background images doing critical work, no web fonts the design depends on (Bricolage Grotesque is progressive enhancement that degrades to Helvetica/Arial in Gmail and Outlook), and nothing that breaks when a client ignores it.

You do not need to rebuild anything. Copy the full HTML and paste it in.

In Klaviyo: create a campaign or flow email, choose the HTML editor (not the drag-and-drop builder), and paste the whole template into the code editor. In Mailchimp: start a new email, pick "Code your own," then "Paste in code," and drop the HTML there.

Swap the brand details. Change "AURE" and the tagline to your brand, replace the product name, price, copy, and the image source (the template points at /img/aureserum.jpg, so host your real photo and update that path plus its alt text and dimensions). Point every href, currently set to example.com, at your real product and footer URLs, and update the address and the line explaining why the subscriber is getting this.

Recolor it if you need to. The fuchsia (#e8467a) appears in the pill, the button (in two places, the VML fillcolor and the link background-color), and the closing band. Find and replace that hex everywhere to match your brand, and keep enough contrast against white text.

Then test before you send. Use Klaviyo's or Mailchimp's preview and inbox testing, or send a real test to Gmail, Apple Mail, and Outlook, and check it on your phone. Confirm the button works in Outlook and that the layout still stacks on mobile. When it looks right, set your subject line (the template suggests "It's back. The serum that sold out in 9 days.") and send.