Klaviyo Email Flow Build | The i.o agency

PM Developer Designer Translator Client

Key Term

Master Klaviyo Account

Agency-owned Klaviyo account called The i.o agency | Templates. Contains all pre-built flow templates and universal saved sections. Never shared with clients. Single source of truth for flow structures.

Key Term

Master Figma File

Agency-owned Figma project called Templates. Contains all universal email section components. Mirrors the saved sections in the Master Klaviyo Account. Base for all client email designs.

Key Term

Client Klaviyo Account

Separate Klaviyo account per client. Flows are never built from scratch here — they are prepared in the Master Account first, then transferred to the client once ready.

Key Term

Figma File

One Figma file per client, named [Client Name]. Used for all design work, client approvals, and Arabic translation comments.

📄 Naming Conventions

Where	Format	Example
Master Klaviyo — Original Template	`[Designer - Template #] - Flow Name`	[Tim - Template 1] - Abandoned Cart
Master Klaviyo — Client Duplicate	`[Client Name] - [Designer - Template #] - Flow Name`	[Cocoon Beauty] - [Tim - Template 1] - Abandoned Cart
Client Klaviyo Account	`Flow Name`	Abandoned Cart
Client Figma File	`[Client Name]`	Cocoon Beauty
Master Figma — Project Name	`[Designer Name] - Klaviyo Templates`	Tim - Klaviyo Templates
Master Figma — Structure	Each template is a group, with individual flow emails listed under it	Template 1 → Abandoned Cart Email 1, Abandoned Cart Email 2, Winback Email 1, Winback Email 2, Winback Email 3

0 Klaviyo Account Setup Client → PM → Developer

👤Client creates a Klaviyo account and sends access to PM and the Founder. Both should be added as Admin.
👥PM adds the rest of the team (developer, designer) as Managers in the client's Klaviyo account.
🔗Developer links the Klaviyo account to Shopify via the Klaviyo integration.
🚫Developer turns off the double opt-in feature in Klaviyo settings.

● Do this before any other work beginsThe Shopify integration and double opt-in setting must be configured before flows or forms are built.

1 Blueprint PM + Claude

🤖PM uses Claude to generate the full flow strategy for the client.
📋Blueprint includes: recommended flows, triggers, timing, delays, conditional splits, and a one-liner for each email's intent.
📝Blueprint also covers sign-up forms (popups) — what forms are needed, their triggers, and targeting rules.
📤PM shares the blueprint with the client as a direction document.
💬This is an alignment step — not a formal approval. Client confirms direction before design begins.

💡 Blueprint = alignment, not approvalThe client sees what will be built and can flag concerns early, but this is not a sign-off gate.

2 Design Designer

🎨Open the Master Figma File and use the universal email section components as the base.
🎨Design all email flows and sign-up forms (popups) in the Figma file: [Client Name]
📄Apply brand-specific changes: colors, fonts, images, content — on top of existing components.
🗐Design must stay within the master block structure.

● Do not deviate from master componentsCustom blocks create inconsistency and break the clone workflow. Stick to the master structure unless the client explicitly asks otherwise.

3 Client Design Approval PM → Client

📤PM sends the Figma file to the client for review — covers both email flows and sign-up forms.
💬Client leaves feedback directly on the Figma file.
✅This is the single formal approval checkpoint for visual design.

⚠️ Single gateThis is the only formal design approval. Everything after this point is build work — changes here mean rework downstream.

Step 4 — Parallel Tracks (start simultaneously after design approval)

4A English Development Developer

🔄Duplicate the relevant template flows inside the Master Klaviyo Account.
🔧Edit the duplicated flows inside the Master Account to match the approved Figma design: update content, images, colors, and client-specific details.
📄Ensure all triggers, filters, delays, and splits match the blueprint.
📤Once ready, transfer the finished flows to the Client Klaviyo Account.
📝Build the sign-up forms (popups) in Klaviyo to match the approved design.
⚡Minor items like discount code creation can be done directly in the Client Klaviyo Account.

● Never send unfinished work to the client accountAll editing happens in the Master Account first. The client should never see template content with another client's logo or information.

4B Arabic Translation Translator

🌐Open the Figma file and add Arabic translations as comments on every text element — emails and sign-up forms.
📤Once all elements are translated, notify PM — the client reviews directly on the Figma file.

⚠️ Only if bilingualThis track only applies when the project requires both English and Arabic. Skip if English-only.

5 Arabic Approval Client

💬Client reviews the Arabic translations on the Figma file.
✅Client approves or requests changes to the Arabic text.
🔄Translator updates any flagged translations until client signs off.

⚠️ Bilingual projects onlySkip this step entirely for English-only projects.

6 Arabic Development Developer

🔄Clone the English flows within the Client Klaviyo Account (not from the Master Account).
🔧Adjust the flow filters to reflect the Arabic locale inside each flow.
📝Apply the client-approved Arabic translations from the Figma file to the cloned flows and sign-up forms.
📄Ensure RTL layout, Arabic fonts, and all content match the approved translations.

⚠️ Bilingual projects onlySkip this step entirely for English-only projects.

7 QA & Activation PM

🔍PM reviews all flows and sign-up forms in the Client Klaviyo Account — both English and Arabic where applicable.
✅Confirm that triggers, filters, delays, and content are all correct.
💬Send test emails for each flow to verify rendering across devices.
🔎Preview sign-up forms on the live store to confirm targeting, timing, and design.
🚀Once signed off, activate all flows and publish all sign-up forms.

● Nothing goes live without PM sign-offEvery flow and sign-up form must be reviewed and approved by the PM before activation. No exceptions.

⚡ The full process at a glance

Setup → Blueprint → Design → Client Approval → PARALLEL EN Dev AR Translation → AR Approval → AR Dev → QA & Go Live

🚀 English-only projects skip Steps 4B, 5, and 6Flow goes straight from English Development to QA & Activation. Sign-up forms follow the same path as flows throughout.