How to use it — Build each module once as a reusable block, then compose flows by stacking them. Design mobile-first at 600px, write for the preview text, and test in dark mode before you send. Every message should earn the next open.
01 · Email module library stack to build any email
Header / navLogo, 1–3 links, optional promo bar
HeroOne message, one CTA, above the fold
Single productImage, name, price, benefit, buy
Product grid2–3 across; collections & cross-sell
Editorial / storyBrand narrative, education, launches
Social proof / UGCReviews, ratings, customer photos
Value props3 icons: shipping, returns, guarantee
Cross-sell"Goes with" / "Complete the look"
FooterLinks, social, address, unsubscribe
02 · Lifecycle flows trigger → timing → goal
| Flow | Trigger | Timing | Goal |
|---|
| Welcome | Signup | 0 · +2d · +4d | Intro & first order |
| Browse abandon | Viewed, no cart | 1–4h | Nudge back |
| Cart / checkout | Added, no buy | 1h · 24h · 48h | Recover sale |
| Post-purchase | Order placed | 0 · +5d · +14d | Confirm, educate, review |
| Winback | Lapsed | 30 · 60 · 90d | Reactivate |
| Replenish | Consumable | ~product cycle | Reorder |
03 · SMS moments & rules earn the interruption
Best for time-sensitive moments
- Product drops, back-in-stock, price drops
- Order & shipping updates, delivery windows
- VIP early access, flash offers with a deadline
- Cart recovery as a second, faster channel
Rules of the channel
- Get explicit consent; SMS is opt-in only
- Lead with brand name + the value in the first line
- One clear CTA link; keep under 160 chars
- Send within daytime hours in the recipient's timezone
- Always include STOP / opt-out
- Never overlap the same message with email
04 · Design & build specs renders everywhere
- 600px width, single column, mobile-first
- Tap targets ≥ 44px; generous spacing between links
- Real live text over text-in-images (deliverability + a11y)
- Alt text on every image; message survives images-off
- Dark-mode-safe colours & transparent-friendly logos
- Bulletproof buttons (HTML/CSS, not image buttons)
- Preview / preheader text written intentionally
- Plain-text version for every send
05 · Measure per message & per flow
- Open rate & click-through (CTR)
- Conversion & revenue per recipient
- Unsubscribe & spam-complaint rate
- Deliverability / inbox placement
- Flow-level revenue vs. one-off campaigns