Overview
The most advanced drag-and-drop email template builder for Magento 2 with AI-powered generation, 37+ block types, 28 starter templates, dark mode preview, spam score checker, and much more.
AI-powered email template designer that generates complete, responsive HTML email templates from natural language prompts. The first Magento 2 extension that uses AI to design full email layouts — not just text content.
Transform a prompt like:
> *"Design a premium order confirmation email with dark theme, product images, tracking button, and social media links"*
Into a complete, responsive HTML email template ready for Magento, tested across Gmail, Outlook, and Apple Mail.
🌙
1. Dark Mode Preview
Instantly preview how your email looks in dark mode email clients (Gmail, Apple Mail, Outlook). Toggle on/off in the preview modal with injected dark theme CSS.
Preview ModalOne-Click Toggle
📱
2. Responsive Visibility
Control which blocks show on desktop vs mobile. "Hide on Desktop" and "Hide on Mobile" checkboxes on every block with CSS media query output.
Per-Block ControlMedia Queries
⏱
3. Countdown Timer Block
Add urgency with live countdown timers. Two styles (boxes/minimal), customizable colors, toggle day/hour/min/sec units. Perfect for flash sales and cart recovery.
Two StylesCustomizableUrgency
💾
4. Saved Blocks Library
Save any block to your personal library for reuse across templates. Persist in localStorage. One-click insert from the Library tab with search and manage.
localStorageLibrary TabReusable
🔒
5. Spam Score Checker
Analyze your email for spam triggers before sending. Checks subject line, spam words, CAPS, image-to-text ratio, alt text, links, unsubscribe, CAN-SPAM compliance. 0-100 score.
0-100 ScoreSubject AnalysisCAN-SPAM
🎯
6. Dynamic Content Conditions
Show/hide blocks based on Magento variables. Conditional block wraps content in {{depend}} or {{if}} tags for order, customer, tracking, invoice, etc.
{{depend}}{{if}}7 Types
✨
7. AI Remix / Redesign
One-click redesign of existing templates. AI analyzes your current blocks and generates a visually improved version with better colors, spacing, and professional polish.
One-ClickKeeps ContentImproves Style
📄
8. 28 Starter Templates
Pre-built templates for every email scenario: order, shipping, invoice, welcome, password, abandoned cart, birthday, flash sale, loyalty, VIP, referral, seasonal, and more.
28 Pre-builtEvery Scenario+ AI Unlimited
🔗
9. Shareable Preview Link
Generate a shareable preview URL that opens the email in a new browser tab. Share with stakeholders, designers, or clients for review without requiring admin access.
New Tab PreviewClipboard CopyNo Login Required
🎫
10. Coupon Code Block
Professional coupon/discount code display with three styles (dashed, solid, filled). Monospace code font, customizable colors, border, and description text.
3 StylesCustomizablePromotions
Key Features
FeatureDescription **Prompt → Full HTML**Natural language prompt generates complete responsive email HTML **All Transactional Emails**Order confirmation, shipping, invoice, credit memo, welcome, password reset, newsletter, abandoned cart, and more.
🤖
Anthropic Claude
Advanced reasoning & design
claude-sonnet-4-20250514claude-3.5-sonnetclaude-3-haiku
💡
OpenAI GPT
Versatile generation
gpt-4ogpt-4-turbogpt-3.5-turbo
💎
Google Gemini
Structured JSON output
gemini-2.5-progemini-1.5-progemini-1.5-flash
★
AI Template Generation
Describe your email in plain English and AI generates a complete, fully-editable template using the builder's block system. Returns structured JSON — not raw HTML — so every element is drag-and-drop editable.
Natural LanguageJSON OutputFully Editable
🎨
AI Remix / Redesign
Already have a template? Click "Remix with AI" to send your current block structure to AI for a professional makeover. AI keeps your content but improves layout, colors, and styling.
One-ClickPreserves Content
🌍
Brand-Aware Generation
AI auto-detects your store's brand colors, logo, name, and social links, then applies them to generated templates for on-brand consistency.
Auto Brand DetectColors & Logo
⚡
Quick Presets
Six one-click AI presets: Order Email, Welcome, Shipping, Newsletter, Cart Recovery, Password Reset. Each populates the prompt and email type for instant generation.
6 PresetsOne-Click
🔨
Drag & Drop Canvas
Drag blocks from the sidebar onto the canvas. Reorder blocks within columns, move between columns, and drop into specific positions with visual drop zone indicators.
🖱
Three-Level Selection
Click to select rows, columns, or blocks independently. Each selection level shows dedicated properties in the right panel: row padding/margins, column background/padding, or block-specific props.
♻
Undo / Redo History
50-level undo/redo with full state snapshots. Every action (add, delete, move, edit) creates a restore point. Keyboard shortcuts Ctrl+Z / Ctrl+Y.
💻
Responsive Canvas
Desktop and mobile device toggle in the toolbar. See how your email adapts at different widths with the device group selector.
🎨
Color-Coded Block Headers
Every block type has a color-coded header for instant visual identification: blue for content, purple for layout, green for store, red for order, pink for promo.
📚
Properties Panel
Context-sensitive properties panel with color pickers, range sliders, text areas, alignment buttons, and checkbox toggles. Changes update the canvas in real-time.
📧
Basic Email
Logo, heading, text, button, footer
🎁
Promotional
Hero, products, CTA, social
📦
Order Confirmation
Order info, items, addresses, totals
📰
Newsletter
Featured articles, 2-column, CTA
🚚
Shipping
Tracking, method, items, addresses
📄
Invoice
Invoice info, items, totals, payment
👋
Welcome
Greeting, 3-column benefits, CTA
🔒
Password Reset
Security notice, reset button
🛒
Cart Recovery
Urgency, coupon, countdown, CTA
⭐
Review Request
Star icons, review CTA
🔔
Back in Stock
Product alert, buy now CTA
🎂
Birthday
Birthday greeting, special coupon
⚡
Flash Sale
Urgent sale, countdown, products
💰
Refund
Credit memo, refund details
🌟
Loyalty
Points summary, 3-column stats
💕
Win-Back
Re-engagement with coupon
💖
Referral
Referral code, share CTA
📋
Survey
Feedback request, survey CTA
🎈
Event
Invitation, countdown, RSVP
☀
Summer Sale
Seasonal promo, 3-col products
❄
Winter Sale
Winter promo, coupon, products
💵
Price Drop
Wishlist price alert
✨
New Arrivals
Latest products, 3-column grid
👑
VIP
Exclusive access, premium coupon
❌
Order Cancelled
Cancellation notice, refund info
🎉
Delivered
Delivery confirmation, review CTA
📬
Subscribed
Newsletter subscription confirm
🔄
Order Update
Order status change notice
💻
Desktop Preview
Full-width desktop preview rendered in an iframe at your configured email width (default 600px).
📱
Mobile Preview
375px mobile viewport preview. See how columns stack and how responsive visibility classes take effect.
📄
HTML Code View
View the raw HTML source in a read-only textarea. Full email-safe HTML with table-based layouts and inline styles.
📃
Plain Text View
Auto-generated plain text version extracted from the HTML. Strips tags but preserves text content and links.
🌙
Dark Mode Preview
Toggle dark mode simulation. Injects dark theme CSS into the preview iframe to simulate dark mode email clients.
🔒
Spam Score Checker
Comprehensive spam analysis: subject line, trigger words, CAPS, image ratio, alt text, links, unsubscribe, CAN-SPAM. Score 0-100 with detailed breakdown.
🔗
Shareable Preview Link
Open the email preview in a new browser tab as a standalone HTML page. Share the URL with stakeholders for review.
📋
Copy & Download
Copy HTML to clipboard or download as .html file. Works in both code view and desktop preview modes.
2 Equal
"2-equal" — [50/50]
2 (60/40)
"2-60-40" — [60/40]
2 (40/60)
"2-40-60" — [40/60]
3 Equal
"3-equal" — [33/33/34]
3 (25/50/25)
"3-25-50-25" — [25/50/25]
4 Columns
"4" — [25/25/25/25]
Store Variables
{{var store.getFrontendName()}}{{store url=""}}{{store url="contact"}}{{store url="customer/account"}}{{var logo_url}}{{var logo_alt}}{{var logo_width}}{{var year}}
Customer Variables
{{var customer.name}}{{var customer.firstname}}{{var customer.lastname}}{{var customer.email}}{{var customer.telephone}}
Order Variables
{{var order.increment_id}}{{var order.getCreatedAtFormatted(2)}}{{var order.getStatusLabel()}}{{var order.getGrandTotal()}}{{var order.getSubtotal()}}{{var order.getTaxAmount()}}{{var order.getShippingAmount()}}{{var order.getDiscountAmount()}}{{var order.getShippingDescription()}}
Address Variables
{{var formattedBillingAddress|raw}}{{var formattedShippingAddress|raw}}
Invoice & Tracking Variables
{{var invoice.increment_id}}{{var creditmemo.increment_id}}{{var shipment.increment_id}}{{var tracking.number}}{{var tracking.url}}{{var payment_html}}
Layout Handles (Order Items)
{{layout handle="sales_email_order_items" order=$order area="frontend"}}{{layout handle="sales_email_order_invoice_items" invoice=$invoice order=$order}}{{layout handle="sales_email_order_creditmemo_items" creditmemo=$creditmemo order=$order}}
Conditional Syntax
{{depend order}}{{/depend}}{{if customer}}{{/if}}
🧩Content
- Search blocks by name
- Drag blocks onto canvas
- Categorized block list
- Content, Layout, Advanced
- Store & Branding
- Order, Customer, Payment
- Invoice, Account blocks
▦Rows
- 7 row layout options
- Drag layouts onto canvas
- 28 starter templates
- One-click template loading
- Organized by category
★AI
- Email type selector (13 types)
- Prompt text area
- 6 quick AI presets
- Generate with AI button
- Remix with AI button
- Status indicator
💾Library
- Saved blocks count
- Color-coded block list
- One-click insert (+)
- Delete saved blocks
- localStorage persistence
- Empty state guidance
⚙Settings
- Email subject line
- Email width (560-680px)
- Canvas background color
- Content background color
- Font family (6 options)
- Global link color
**Brand Auto-Detection**Automatically pulls colors, logo, fonts from your Magento store **A/B Variant Generation**Generate 2–5 design variants from a single prompt with built-in testing **Mobile Responsive**Guaranteed responsive output with table-based layouts **Email Client Tested**Built-in HTML validator checks Gmail, Outlook, Apple Mail compatibility
**Screenshot → Template**Upload a screenshot of any email and AI recreates it as responsive HTML **Live Preview**Desktop + mobile preview, HTML code editor, plain text view **Drag-and-Drop Editing**Post-generation editing with drag-and-drop interface **One-Click Assign**Assign AI templates directly to Magento transactional emails **Version History**Full version tracking for all template changes **Spam Score Check**Built-in spam score analysis for subjects and HTML.
Requirements
- Magento 2.4.4+ (Open Source or Commerce)
- PHP 8.1+
- API key from Anthropic (Claude), OpenAI (GPT-4), or Google (Gemini)
Usage
1. AI Designer
Navigate to AI Email Designer → AI Designer
- 1. Select the Email Type (Order Confirmation, Shipping, etc.)
- 2. Choose a Quick Preset or write your own prompt
- 3. Optionally enable A/B Variants
- 4. Click Generate Email Template
- 5. Preview in Desktop/Mobile views
- 6. Save the template
- 7. Assign it to a Magento transactional email
2. Screenshot Recreation
- 1. In the AI Designer, upload a screenshot of any email design
- 2. AI analyzes the layout, colors, and components
- 3. Generates a responsive HTML email matching the screenshot
- 4. Edit and customize as needed
3. Template Refinement
After generating, use the Refine feature:
- *"Make the header darker"*
- *"Add a coupon code section above the footer"*
- *"Change all buttons to rounded with 8px radius"*
- *"Add a 2-column product grid"*
4. Testing
- Validate: Check HTML compatibility score across email clients
- Send Test: Send test emails to any address
- Spam Check: Analyze subject line and HTML for spam triggers
- Litmus/Email on Acid: Automated testing across 90+ clients (optional API keys)
5. Assign to Magento
One-click assignment to any Magento transactional email:
- The AI template replaces Magento's default for that email type
- A/B variants rotate automatically when enabled
- Revert anytime by deactivating the template
Configuration
Navigate to Stores → Configuration in Magento Admin.
AI Email Designer
General Settings
| Field |
Type |
Description |
| Enable Module |
select |
Enable or disable the AI Email Designer module. |
| Enable Debug Logging |
select |
|
AI Provider Settings
| Field |
Type |
Description |
| AI Provider |
select |
Select the AI provider for email template generation. |
| Anthropic (Claude) API Key |
obscure |
Enter your Anthropic API key for Claude AI. |
| |
text |
|
| Anthropic Model |
select |
|
| |
text |
|
| OpenAI API Key |
obscure |
Enter your OpenAI API key. |
| |
text |
|
| OpenAI Model |
select |
|
| |
text |
|
| Google Gemini API Key |
obscure |
Enter your Google AI Studio / Gemini API key. Get one at <a href="https://aistudio.google.com/apikey" target="_blank">aistudio.google.com/apikey</a> |
| |
text |
|
| Gemini Model |
select |
|
| |
text |
|
| Max Tokens |
text |
Maximum tokens for AI response (recommended: 8192). |
| Temperature |
text |
AI creativity level (0.0 = deterministic, 1.0 = creative). Recommended: 0.7 |
Brand Settings
| Field |
Type |
Description |
| Auto-Detect Brand |
select |
Automatically detect brand colors and logo from your store. |
| Primary Brand Color |
text |
Hex color code (e.g., #FF6600). Leave empty for auto-detection. |
| Secondary Brand Color |
text |
|
| Accent Color |
text |
|
| Brand Logo for Emails |
image |
Upload logo for email templates. Leave empty to use store logo. |
| Email Font Family |
select |
|
| Facebook URL |
text |
|
| Instagram URL |
text |
|
| X (Twitter) URL |
text |
|
| LinkedIn URL |
text |
|
| YouTube URL |
text |
|
| TikTok URL |
text |
|
Email Testing
| Field |
Type |
Description |
| Test Email Address |
text |
Default email address for sending test emails. |
| Litmus API Key (Optional) |
obscure |
For automated email client rendering tests. |
| Email on Acid API Key (Optional) |
obscure |
Alternative email testing service. |
A/B Testing
| Field |
Type |
Description |
| Enable A/B Testing |
select |
|
| Default Number of Variants |
text |
Number of A/B variants to generate per prompt (2-5). |
| Auto-Select Winner |
select |
Automatically select the best performing variant based on open rate. |
| Test Duration (Days) |
text |
|
Advanced Settings
| Field |
Type |
Description |
| Custom CSS for All Templates |
textarea |
CSS that will be inlined into all generated email templates. |
| Custom Header HTML |
textarea |
HTML to inject at the top of every generated email. |
| Custom Footer HTML |
textarea |
HTML to inject at the bottom of every generated email. |
| Auto Inline CSS |
select |
Automatically inline CSS for better email client compatibility. |
Reviews
There are no reviews yet.