Replenishment Email for Supplement Brands

<p>Supplements run on a clock. A customer buys a 30-serving tub, takes one scoop a day, and hits empty 30 days later. That predictability is the whole opportunity: you know the run-out date, so you can put the reorder in front of them before they think to open Amazon.</p><p><strong>Trigger.</strong> Fire from <em>Placed Order</em> with a delay calculated from the SKU's serving count, not a flat 30-day wait. For Rootwell Daily Greens (30 servings, one scoop a day), that delay is 24 days. A 90-capsule bottle taken three times a day gets the same 24-day delay. Tie the delay to the unit economics of the product, not a calendar guess.</p><p><strong>Timing.</strong> Send at day 24 of a 30-day cycle. That leaves five to six days for picking, packing, and transit so the new tub lands as the old one runs dry. Hold a second nudge for day 30, only if they did not reorder. Past day 35 you are running a lapsed-buyer flow, not replenishment.</p><p><strong>Offer.</strong> Lead with Subscribe &amp; Save (15% off plus free shipping), not a one-off coupon. A subscriber is worth the next six cycles. A discounted reorder is worth one. Keep the one-off reorder as the default button, with Subscribe &amp; Save as the better deal beside it.</p><p><strong>Copy angle.</strong> Frame continuity, not discount. Name the product, the order date, and the run-out date. Customers respond to "your 30-day reset" more than to "10% off."</p><p>Example subject line: <strong>Your Daily Greens run out Thursday</strong>. Preheader: <em>Reorder now and we will ship before you miss a day.</em> Body lead: "You ordered Daily Greens on {{ order_date }}. A 30-serving tub lasts about 30 days, so you will run out around {{ runout_date }}. Reorder today and a fresh tub lands before you miss a morning."</p><p><strong>CTA.</strong> One reorder button, product-specific and price-visible: <strong>Reorder 1 tub for $39</strong>. Specificity beats a generic "Shop now." In supplement accounts we work with, a single well-timed replenishment touch drives 22 to 28% of recurring revenue. Move the send from day 30 to day 24 and reorder rate typically climbs several more points, because the email arrives while the habit is still active.</p>

<p>The HTML Mailwright exports is built to survive the worst email clients, not just look good in a designer's Mac. Every structural choice below exists because a real inbox breaks without it.</p><p><strong>Nested tables, not divs or flex.</strong> Layout is built from <code>&lt;table role="presentation"&gt;</code> cells, the way email clients have expected HTML for twenty years. Gmail, Outlook, and Yahoo all honor it. Flexbox and CSS grid do not survive most of them.</p><p><strong>Inline CSS on every element.</strong> Styles live on the element they affect. Many clients strip <code>&lt;style&gt;</code> blocks from the head or ignore class-based rules, so a <code>style="..."</code> attribute on each cell is what actually carries your padding, color, and font.</p><p><strong>Bulletproof VML button for Outlook.</strong> Outlook 2007 through 2021 render email in Microsoft Word, not a browser. They ignore <code>border-radius</code> and degrade rounded buttons to thin links. The CTA is wrapped in MSO conditional comments with VML so Outlook draws a solid, clickable rectangle at full width and height.</p><p><strong>Live text, not images.</strong> Headlines and body copy are real text. They render before images download, scale on every screen, and read correctly to screen readers. Images carry product visuals, not the message.</p><p><strong>Dark-mode color-scheme meta.</strong> The head carries <code>&lt;meta name="color-scheme" content="light dark"&gt;</code> and <code>&lt;meta name="supported-color-schemes" content="light dark"&gt;</code>, with the background color set on the wrapping table. Apple Mail and Outlook dark modes respect it instead of inverting your greens into mud.</p><p><strong>One mobile media query.</strong> A single <code>@media (max-width: 600px)</code> rule collapses the layout to one column and sizes images to the viewport. No query stacking, no client-specific hacks that stop working in six months.</p><p><strong>Web-font fallbacks.</strong> If the design loads a custom font, each <code>font-family</code> chain ends in a system serif or sans-serif that already exists on the device. When the web font is blocked or slow, the email still reads as intended.</p>

<p><strong>1. Copy the HTML.</strong> Grab the exported HTML from the Mailwright preview pane, or compile the MJML below with the MJML app or CLI (<code>mjml input.mjml -o output.html</code>).</p><p><strong>2. Paste into your ESP.</strong> In Klaviyo, open your email, drag in an HTML block, and paste. Or build a templated flow email and drop the HTML into the source view. In Mailchimp, choose <em>Code your own &gt; Paste in code</em> and drop it in the body field.</p><p><strong>3. Swap brand, colors, and links.</strong> Replace the brand name, the four hex values (header bar, button, accent, body text), the hero image URL, and every <code>rootwell.example</code> link with your store domain.</p><p><strong>4. Wire merge tags.</strong> Connect personalization fields to the data your ESP already holds. Supplements examples:</p><ul><li><strong>Klaviyo:</strong> <code>{{ first_name|default:"there" }}</code>, <code>{{ event|lookup:'order_date' }}</code>, a catalog block that pulls the reordered product's price and image, and <code>{{ unsubscribe_url }}</code> in the footer.</li><li><strong>Mailchimp:</strong> <code>*|FNAME|*</code> with a fallback, <code>*|ORDER_DATE|*</code>, a product block for the reordered SKU, and <code>*|UNSUB|*</code>.</li><li><strong>Run-out date:</strong> compute it in your flow (order date plus serving count) and pass it as an event property, so the subject can read "runs out Thursday" instead of "time to reorder."</li></ul><p><strong>5. Test before you send.</strong> Preview in Klaviyo or Mailchimp Inbox Inspector across Gmail (web, iOS, Android), Apple Mail, and Outlook 2019 plus 365. Toggle dark mode on and off in Apple Mail and Outlook. For full coverage, run the HTML through Email on Acid or Litmus. Confirm the VML button draws solid in Outlook, the hero stacks on mobile, and the merge tags resolve to real values rather than raw braces.</p>