Sugar & Sprinkle — Order Receipt Email
Transactional receipt email with Liquid templating and pickup/delivery branching
A fictional cupcake-bakery order receipt written in raw HTML — Liquid templating in the production-shippable source, conditional discount and pickup/delivery branches, VML `<v:roundrect>` Track CTA fallback for Outlook, and Outlook.com dark-mode locking.
Problem
Transactional emails are usually generated by a service (Shopify, Klaviyo, Postmark) and inherit whatever rendering quirks the platform produces. Hand-rolling one means owning the full chain — semantic table layout, dynamic-data templating, Outlook fallbacks, and dark-mode behavior — without the safety net of a vendor-tested template.
Goal
Build a polished order-receipt template that ships as both a production-shippable Liquid source and a fully rendered static preview, with item-loop, conditional discount + pickup/delivery branching, plain-text alternatives, and proper Outlook + Outlook.com dark-mode handling.
What I Built
A fictional Sugar & Sprinkle cupcake-bakery order receipt. The repo ships two parallel files: `template.html` is the production-shippable Liquid source — what a service like Klaviyo or Postmark would consume, with `{{ variables }}`, a `{% for %}` item loop, and `{% if %}` branches for the discount row and pickup-vs-delivery. `index.html` is the rendered static version the live Netlify URL serves — no Liquid, only resolved markup. Plain-text alternatives ship for both.
Key Features
- Two-file architecture: `template.html` Liquid source + `index.html` rendered static preview, each with a sibling `.txt` plain-text alternative
- Liquid templating in `template.html` — `{{ variables }}`, a `{% for %}` cupcake item loop, and `{% if %}` conditionals for the discount row and pickup-vs-delivery card
- MSO conditional comments: 600px ghost table, Quicksand→Arial font fallback, `mso-line-height-rule: exactly` on every script-font heading, `mso-hide: all` preheader
- VML `<v:roundrect>` Track CTA replacing the HTML button in Outlook
- Outlook.com dark-mode locking via `[data-ogsc]` / `[data-ogsb]` attribute selectors so the dark-plum footer doesn't get auto-inverted
- `role="presentation"` discipline on every layout table, `format-detection` off for telephone/date/address/email, decorative emoji marked `aria-hidden="true"`
- Responsive media queries at 600px and 480px, with an `mso-hide: all` preheader spacer feeding inbox-preview text
- Hosted-preview colophon block gated `<!--[if !mso]>` so it only renders on the Netlify preview and never ships inside the email payload
Challenges
- Outlook.com auto-inverts dark backgrounds — the targeted `[data-ogsc]` / `[data-ogsb]` overrides were the only way to keep the dark-plum footer reading correctly without affecting clients that handle dark mode honestly
- Keeping `template.html` and `index.html` (and their `.txt` siblings) in sync — every layout change has to be applied to both files until a build step is added
Outcome
Live on Netlify as a viewable preview, with a colophon block below the email documenting the engineering and accessibility decisions (same pattern as the A|G Realty briefing). README is honest about what's deferred — CSS inlining via juice/premailer, Litmus / Email on Acid client testing, `prefers-color-scheme` dark-mode CSS, CDN image delivery, and SPF/DKIM/DMARC are all flagged as production-hardening next steps rather than claimed.
Next Steps
- Wire CSS inlining via juice or premailer so the production `template.html` ships with inlined styles
- Run Litmus / Email on Acid screenshot tests across Gmail, Apple Mail, Outlook (web/desktop), and Yahoo to verify what the README hasn't yet