Replenishment Email Template

A replenishment email reminds a buyer of a consumable product to reorder before they run out. Its single job is to turn a predicted run-out into one click.

Open the full email ↗ Get this on your brand
Live preview View HTML ↗

What makes this replenishment email work

The trigger is a predicted run-out date, not a fixed delay after purchase. You calculate it from the customer's reorder history, or if you have none yet, from the product's expected usage. A 30-serving protein powder is a 30-day cycle. A 250g bag of coffee for a daily drinker is closer to 14 days. The trigger fires when that cycle is almost up.

Timing has to account for shipping plus human lag. If the bag lasts 14 days and ground shipping takes 4, fire at day 8 or 9. The customer still has coffee on the counter, so the email reads as helpful rather than frantic, and the replacement lands before the cupboard is empty. Send too early and you nag. Send too late and they have already grabbed a substitute at the grocery store. Replenishment flows for consumables commonly convert somewhere between 15 and 40 percent, which is why the timing math is worth getting right.

The message is one sentence: you are about to run out, here is your refill. A subject like "Running low, Sam?" or "Your next bag of House Blend is ready" beats any clever angle. The preheader carries the convenience hook: "Reorder in two taps. We roast and ship today."

Do not lead with a discount. The job is convenience. If the first send does not convert, follow up three days later with a light nudge, free shipping or 10 percent off, not a deep cut. Discounting the first replenishment trains people to wait for the next coupon.

CTA discipline means one button, "Reorder House Blend," linked to a pre-filled cart or a one-click reorder page. Not the homepage, not a product listing. The fewer fields between the click and the confirmation, the higher the conversion.

Why it renders in every inbox

The layout is built from nested HTML tables, not divs or flexbox. Outlook 2007 through the new Outlook for Windows renders email with Word's engine, which ignores CSS flexbox and mishandles floated divs. Nesting tables three deep, a wrapper, a section, a column, keeps the two-column product block aligned in Outlook the same way it looks in Gmail.

Every text style is inline. Gmail clips or strips style blocks in some setups, and a handful of webmail clients do the same. Inlining means the headline, the product name, and the price all hold their color and size with no external CSS at all.

The reorder button is a bulletproof VML button. Outlook does not honor padding or background-color on an anchor tag, so a plain button shows up as a thin text link with no clickable area. The VML version draws a real rectangle with mso styles, so the button keeps its amber fill, its padding, and its click target inside Word's renderer.

Headline, product name, price, and CTA are all live text. Image-only emails fail accessibility, get flagged by spam filters, and show nothing when images are blocked, which is still the default in Outlook. The only image in this template is the product photo, with descriptive alt text attached.

Dark mode is handled with two meta tags in the head, color-scheme and supported-color-schemes, both set to "light dark". iOS Mail and Apple Mail respect these and keep the cream background and dark text instead of inverting them. Without the tags, the cream turns near-black and the brown text disappears.

One mobile media query at 600px sets the tables to full width and bumps the button to a comfortable tap size. Apple Mail and Gmail mobile honor it. There is no point shipping a second query for clients that ignore both. The headline font falls back through Georgia, Times New Roman, serif, so the layout holds even when a custom web font is blocked by the inbox.

How to use it in Klaviyo or Mailchimp

1. Copy the compiled HTML from the export.

2. In Klaviyo, open your flow email or a one-off campaign. In the content editor, drag an HTML block onto the canvas and paste the code. For a pure HTML email, go to Email Templates, upload the file, and build the campaign or flow from that template.

3. In Mailchimp, start a campaign, choose Code Your Own, then Paste In Code, and drop the HTML into the editor.

4. Swap the brand. Replace the Northpeak name and logo in the header, the product photo, the product name and price, and the footer address with the client's.

5. Swap the colors. Two hex values drive the whole palette: the espresso brown (#3B2A20) for text and the amber (#C8742E) for the button. Change those two and the header, divider, button, and link color all update.

6. Wire in merge tags. Replace "Sam" with {{ first_name|default:'there' }} in Klaviyo, or *|FNAME|* in Mailchimp. Replace the static reorder link with the dynamic product URL from your Shopify or Recharge integration, or a pre-filled cart link.

7. Test before you send. Send a preview to Gmail on desktop and mobile, Apple Mail on macOS and iOS, and Outlook on Windows. Toggle dark mode on iOS and macOS and confirm the cream background holds. Click the button in Outlook to confirm the VML target works. Then schedule.

Questions

Is this replenishment email template free? +

Yes. Copy the MJML or the compiled HTML, edit it, and send it through your own ESP. There is no charge and no watermark in the code. Your only cost is what your ESP charges to send.

Will the reorder button and layout render in Outlook? +

Yes. The button is a bulletproof VML button written for Outlook's Word rendering engine, and the whole layout uses nested HTML tables so the columns keep their width. We test in Outlook 2016, 2019, and the new Outlook for Windows.

Can I change the colors and fonts to match my brand? +

Yes. Two hex values drive the entire palette, the dark text color and the button color. Swap those and the header, divider, button, and link all update. The headline falls back to Georgia and the body to the system sans, so you can ship as-is or drop in a brand web font.

How much HTML do I need to know to use it? +

Almost none. Paste the compiled HTML into Klaviyo or Mailchimp and you can edit the words, links, and two colors without touching code. You only need basic HTML if you want to change the spacing or add a second product row to the card.

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

More templates