Skip to content

Previewing and Testing Emails

Email clients are unforgiving - what looks perfect in a browser can fall apart in Outlook or get clipped by Gmail. The Hyvä editor bakes testing into the workflow: a live preview with realistic data, client simulations, an automated health check, and one-click test sends.

Live Preview with Realistic Data

The editor preview replaces Magento directives with data as you type, so you never stare at raw {{var ...}} placeholders:

  • Customer details come from Email Preview Data (or the dummy subscriber for newsletters).
  • Set Preview Order (Increment ID) to a real order and the preview renders that order's actual items, totals, addresses, and product images.
  • Without an order, dummy products (or the SKUs you configure) fill the Order Items table.

Email Client Simulation

The preview toolbar lets you view your email the way different clients render it:

  • Gmail (desktop and mobile) - inlines your styles and disables <style> blocks, exactly like Gmail does, and shows a clipping banner when the email exceeds Gmail's 102 KB limit.
  • Outlook - flags layout that Outlook's Word-based engine cannot render.
  • Apple Mail (desktop and mobile).
  • Dark mode - simulates dark-mode color transformations so you can spot unreadable text early.

The Health Check Panel

The analysis panel scans the rendered email and reports issues in three areas, each with an explanation and a suggested fix:

Deliverability - spam trigger phrases, subject length (desktop and mobile limits), missing or oversized preheader, total email weight, Gmail clipping, http:// links, missing physical address, missing unsubscribe link (newsletters).

Accessibility - color contrast below WCAG AA, images without alt text, image-only emails, heading order, generic link texts ("click here"), missing document language, small font sizes, all-caps text.

Client compatibility - flex or grid layout (Outlook falls back to block), CSS classes without inline styles (Gmail strips <style>), background images, web fonts, forms and scripts, SVG and data-URI images, deeply nested tables, layout tables not marked presentational.

Built-in components pass by default

The bundled email components are built to satisfy these checks - table-based layout marked role="presentation", AA-compliant default colors, bulletproof Outlook buttons. Warnings usually point at custom HTML components or color choices, and each warning tells you exactly which element triggered it.

Sending a Test Email

Use the Send Test Email button in the editor header, enter a recipient address, and hit Send. The email arrives rendered with the same preview data you see in the editor - the fastest way to check real inboxes and devices.

Newsletter templates have the same button, sending a test with the dummy subscriber data (so the unsubscribe link resolves to a placeholder, not a live unsubscribe).

Version History

Every save creates a version. Use the version history to compare and roll back if an edit goes wrong - both email and newsletter templates keep their own history.