Skip to content

Building Email Templates with the Hyvä Editor

This guide shows you how to open a transactional email template in the Hyvä Liveview Editor, which components you have to work with, and how to insert dynamic data like the customer's name or order number.

Enabling the Hyvä Editor on a Template

  1. Make sure Enable for Email Templates is on - see Configuration.
  2. Go to Marketing → Communications → Email Templates and open (or create) a template.
  3. Tick the Enable Hyvä Editor checkbox on the template form and save.
  4. Open the template in the Hyvä editor and start building.

Skip the manual work

The Create Email Templates and Map Templates to Configuration buttons in the configuration set up all standard transactional emails for you, pre-filled with ready-made content. See Configuration. You then only edit the ones you want to change.

Email Components

Email templates use their own component set, built for maximum email-client compatibility (table-based layout, inlined CSS). They appear in the component picker only inside email and newsletter templates, and regular CMS components are not offered inside emails - the two worlds are deliberately kept apart, because storefront components would break in email clients.

Structure Components

Component Use it for
Email Wrapper The outer container - sets max width (400-600px), background, and padding. Start every email with one.
Section A full-width band inside the wrapper with its own background and padding.
Two Columns Side-by-side content with configurable split (50/50, 60/40, and more).
Card A boxed content area with background, border, and rounded corners.

Content Components

Component Use it for
Heading Titles (H1-H4) with color and alignment controls.
Text Rich text paragraphs.
Button A bulletproof call-to-action button that renders correctly even in Outlook.
Image Images with width and alignment controls, optionally linked.
Divider / Spacer Visual separation and vertical spacing.
HTML Code Raw HTML for anything the components don't cover.

Email-Specific Components

Component Use it for
Email Header Store logo, optional store name, linked to your store.
Email Footer Store name, copyright line, and links.
Order Intro The greeting ("Dear Jane,") and introduction paragraph of order emails. Both texts are editable and support variables.
Order Summary / Document Summary The order/invoice/shipment/credit memo reference box with number and date.
Order Items The "Items Ordered" table, with an optional product image column.
Order Totals Subtotal, shipping, tax, and grand total rows.
Order Addresses Billing and shipping address blocks.
Order Customer Note The customer's order note, shown only when present.
Shipment Tracking Carrier and tracking number table for shipment emails.
Admin Comment The comment entered when an admin updates an order - only rendered when a comment exists.
Dynamic Button A button whose link resolves per email - order page, account page, password reset, newsletter unsubscribe, or a custom URL.

Inserting Variables

Rich text fields have an Insert Variable button in their toolbar. It inserts Magento directives such as {{var order_data.customer_name}} that resolve when the email is sent - and the editor preview resolves them immediately using your preview data, so you always see realistic content.

For example, the Order Intro component ships with:

  • Greeting: {{trans "Dear %name," name=$order_data.customer_name}}
  • Intro Text: a thank-you sentence you can rewrite freely

Both are plain editable fields - change the wording, add variables, or translate them per store view.

Variables survive everything

Directives are resolved at send time by Magento, not stored as static text. The same template greets every customer by their own name.

Preheader Text

The preheader is the short snippet inboxes show next to the subject line. Set a per-template preheader in the editor's settings panel, or rely on the store-wide default from configuration. Emails without either fall back to the subject line.

Headers and Footers

You do not need to add a header and footer to every template. With Include Header / Include Footer enabled in configuration, every Hyvä email is automatically wrapped with your chosen header and footer templates. Build them once as separate email templates using the Email Header and Email Footer components.