"Your Routine" Module — Email Implementation

Email clients can't render modern CSS

The PDP routine module uses flexbox, border-radius, hover states, and JavaScript — none of which work in email. Gmail strips <style> tags entirely. Outlook uses Word's rendering engine. We need a different approach that achieves the same visual and strategic effect within these constraints.

Additionally, Klaviyo's show/hide logic works with profile properties only (not order history directly). So we need to sync routine state data to each customer's Klaviyo profile to drive personalisation.

Three approaches — with trade-offs

How the image strip approach works

Klaviyo profile properties we need

These custom properties need to be synced to each customer profile (via Shopify Flow, Klaviyo webhook, or a nightly sync script):

Image variants to design

We don't need an image for every possible combination of 4 boolean steps (which would be 16). Instead, we design for the realistic customer journeys. Two segments deserve special attention: quiz completers (~150-200/day who have a routine recommendation but haven't purchased) and single-product buyers (1/4 steps — the biggest routine expansion opportunity).

That's 13 images total. The two new priority segments:

How it looks in email

These mockups simulate how the routine strip renders as a single image block within an email. Toggle between states:

Show/hide logic in practice

In the Klaviyo template editor, you'd add 13 image blocks stacked vertically. Each one has a show/hide condition. Only one renders per recipient. Here's the logic for each (showing Clarity examples — duplicate with 'radiance' for Radiance variants):

// Block 1: Cold (no quiz, no purchase data)
Condition: not person|lookup:'routine_type'
         and not person|lookup:'has_completed_quiz'
// Fallback — shows when we know nothing about them

// Block 2: Quiz completer — Clarity (no purchase)
Condition: person|lookup:'has_completed_quiz' == 1
         and person|lookup:'routine_type' == 'clarity'
         and person|lookup:'routine_progress' == 0
// ~150-200 quiz completions/day, high intent, no conversion yet

// Block 4: Kit buyer — Clarity
Condition: person|lookup:'has_bought_kit' == 1
         and person|lookup:'routine_type' == 'clarity'
         and person|lookup:'routine_progress' < 4

// Block 6: Single product buyer (1/4) — Clarity
Condition: person|lookup:'routine_type' == 'clarity'
         and person|lookup:'routine_progress' == 1
         and person|lookup:'has_bought_kit' != 1
// Key retention segment — 1 product, 3 gaps

// Block 8: Partial routine (2/4) — Clarity
Condition: person|lookup:'routine_type' == 'clarity'
         and person|lookup:'routine_progress' == 2
         and person|lookup:'has_bought_kit' != 1

// Block 10: Nearly there (3/4) — Clarity
Condition: person|lookup:'routine_type' == 'clarity'
         and person|lookup:'routine_progress' == 3

// Block 12: Complete — not subscribed
Condition: person|lookup:'routine_progress' == 4
         and person|lookup:'is_subscriber' != 1

// Block 13: Active subscriber (overrides all)
Condition: person|lookup:'is_subscriber' == 1

Where this module sits in each email

The routine strip should appear in a consistent position across all emails — creating a persistent, recognisable element that reinforces the routine concept over time.

Option C: Dynamic image generation

If you outgrow the pre-rendered image approach (e.g., you want to show the exact products a customer owns with their actual product images), here's how the dynamic image API would work:

// Klaviyo dynamic image URL
https://routine-img.drsamsbunting.com/strip
  ?routine=clarity
  &steps=1,1,0,0        // owned: cleanse, activate
  &progress=2
  &subscriber=false

// In Klaviyo, the URL would be:
https://routine-img.drsamsbunting.com/strip
  ?routine={{ person|lookup:'routine_type' }}
  &steps={{ person|lookup:'routine_step_cleanse'|default:'0' }},{{ person|lookup:'routine_step_activate'|default:'0' }},{{ person|lookup:'routine_step_hydrate'|default:'0' }},{{ person|lookup:'routine_step_protect'|default:'0' }}
  &progress={{ person|lookup:'routine_progress'|default:'0' }}
  &subscriber={{ person|lookup:'is_subscriber'|default:'0' }}

The API (a Vercel edge function or Cloudflare Worker) would receive these parameters and return a rendered PNG using something like Satori (from Vercel) or Puppeteer. One image block in Klaviyo, zero show/hide logic, infinite personalisation.