Home » Entwicklung » Styling von E-Mail-Templates: Magento und Hyvä-Theme geschickt kombinieren
Ein Laptop-Screen, in dem ein E-Mail-Symbol zu sehen ist

Styling von E-Mail-Templates: Magento und Hyvä-Theme geschickt kombinieren

Ein einheitliches Design von Mailings und Onlineshop ist wichtig für die Markenidentität im E-Commerce. Damit es leicht gelingt, hat netz98 das E-Mail-Template des Shopsystems von Adobe Commerce (Magento) um eine Kombination von Hyvä-Theme und Tailwind CSS erweitert. Diese ist bereits erfolgreich bei unserem Kunden mey im Einsatz.

Stimmiges Layout bei E-Mail-Kommunikation gefragt

In der Welt des E-Commerce ist die E-Mail-Kommunikation nach wie vor ein unverzichtbares Instrument zur Werbung und Kundenbindung. Sie ermöglicht es Unternehmen, ihre Kunden und Interessenten über neue Produkte, Angebote und Updates zu informieren und ist ein wichtiger Kontaktkanal für den Kundenservice. Unterstützt durch KI und CX-Tools machen Mailings zudem eine sehr personalisierte Ansprache der Konsumenten möglich.

Daher ist es von entscheidender Bedeutung, dass die E-Mail-Templates eines Unternehmens nicht nur funktional, sondern auch ästhetisch ansprechend und im Einklang mit der Markenidentität sind. Dies bedeutet, dass sich das Layout der Mailings zum einen nah am Design des Webshops orientieren sollte, der den Kunden im Optimalfall bereits vertraut ist. Zudem sollte auch das Erscheinungsbild der verschiedenen Mail-Typen (Werbung, Support, Bestätigungsmails etc.) untereinander stimmig sein.

Styling von E-Mail-Templates in Adobe Commerce (Magento)

Für das einheitliche Styling von E-Mail-Templates bietet das Shopsystem Adobe Commerce (Magento) eine robuste Lösung. Das Hyvä-Theme ist ein fortschrittliches Frontend-Theme auf Open-Source-Basis für Magento2. Es wurde speziell für eine erleichterte Entwicklung von ansprechenden, performanten und benutzerfreundlichen E-Commerce-Plattformen mit Magento konzipiert. Es zeichnet sich durch Leistungsorientierung, Flexibilität, eine hohe Modularität und große Benutzerfreundlichkeit aus.

Trotz der vielen Vorteile des Hyvä-Themes gibt es bei dem Styling der E-Mail-Templates jedoch eine gewisse Herausforderung: Das liegt an der Integration des CSS-Framework Tailwind und dessen Konfiguration, die im Hyvä-Theme für das Styling von E-Mail-Templates eingesetzt wird. Diese ermöglichen dort von Grund auf nur in einer CSS- oder Less-Datei das Styling eines E-Mail-Templates. Dadurch ist es nicht möglich, vordefinierte Tailwind CSS-Klassen direkt in die Theme-Templates der Mailings zu integrieren, wie es das Hyvä-Theme mit Tailwind CSS für die normalen Theme-Templates der Shop-Seiten ermöglicht.

netz98 optimiert Synchronisation von Shop-Style und Mail-Templates

Um diese Herausforderung zu überwinden, hat das netz98-Team für den Onlineshop und die Mailings unseres Kunden mey (hier geht es zur Referenz) eine besondere Lösung implementiert. Diese ermöglicht die Nutzung von Tailwind Utility-Klassen in den E-Mail-Templates von Hyvä-Theme. Sie beinhaltet die Erstellung einer zusätzlichen Konfigurationsdatei für Tailwind CSS- und Post CSS für die E-Mails samt Umwandlung von Rem-Werten in Pixel.

Letzteres ist deshalb wichtig, da die meisten E-Mail-Anbieter nur Pixel als CSS-Einheit zum Styling der Mails akzeptieren. Außerdem hat das netz98-Team die Möglichkeit geschaffen, die Theme-Konfiguration von Tailwind CSS zu importieren, eine neue Konfiguration für die Mails zu erstellen und eine Verlinkung zur neuen Konfiguration in der Source CSS-Datei zu hinterlegen.

Das E-Mail-Template von mey ist mobile-optimiert und klar angelehnt an die Designsprache des Onlineshops. (Quelle: netz98)

Leichteres Styling, schnellere Ladezeiten

Die Vorteile dieser netz98-Lösung sind vielfältig. Sie ermöglicht eine Vereinheitlichung zwischen dem, was im Frontend-Theme des mey-Onlineshops und in den Mails gestylt wird und macht das Design der Mails einfacher. Das liegt daran, dass die Tailwind CSS-Klassen direkt in den Templates verwendet werden können. Zudem führt die Lösung zu einem sauberen Code und produziert weniger an unnötigen CSS-Dateien.

Zusätzlich werden nur die Utility-Klassen, die in den E-Mail-Templates verwendet wurden, durch Tailwind in den Header-Bereich des HTML-Dokuments exportiert. Dadurch reduziert sich die Größe der CSS-Datei, die die mey-Kunden beim Öffnen der Mails herunterladen müssen, erheblich. Schnellere Ladezeiten der E-Mails von mey sind die Folge, was wiederum für eine höhere Zufriedenheit der Kunden sorgt.

Leistungsstarke und flexible E-Mail-Lösung

Insgesamt zeigt diese Lösung für unseren Kunden mey, wie eine sinnvolle Kombination von Magento, Hyvä und Tailwind CSS zu einer leistungsstarken und flexiblen Lösung für das Styling von E-Mail-Templates im E-Commerce führen kann. Diese innovative Entwicklung von netz98 erleichtert dem Traditionsunternehmen mey und seiner Kundschaft die E-Mail-Kommunikation und macht diese fit für die Zukunft.

Wollen auch Sie Ihre Mailings in punkto Styling und Performance optimieren? Kontaktieren Sie uns gerne:

Hartwig Göttlicher
Head of Business Development

 

Ihr Kontakt

Hartwig Göttlicher
Head of Business Development
Interview: Hyvä als zukunftsfestes Frontend – Chancen und Nutzen für Magento Projekte
Logos von Hyvä und valantic mit Herz dazwischen

Lesen Sie im Interview mit unserer zertifizierten Entwicklerin alles über den Nutzen des modernen Frontends für Magento E-Commerce Projekte.

Flexible Datenverarbeitung: Migration zwischen Content Systemen mit Low Code managen 
Mann vor einem PC-Bildschirm mit Code

Lesen Sie, wie unsere erprobte valantic Methode zur Content-Migration Unternehmen hilft, den Prozess effizient und kostengünstig zu meistern.

E-Commerce Entwicklung 2025: Stabilisierung nach dem Boom – wie sich der B2C-Onlinehandel entwickelt
Ein junger Mann mit Bart und grünem Hemd steht lächelnd in einem modernen Konferenzraum. Er wirkt selbstbewusst und entspannt, während er sich leicht an einen Tisch lehnt. Im Hintergrund sitzen drei weitere Personen – zwei Männer und eine Frau – an einem langen Holztisch. An der Wand hängt ein Bildschirm mit einem Diagramm, das steigende Balken zeigt. Tageslicht fällt durch ein großes Fenster in den Raum.

E-Commerce Entwicklung 2025 im Überblick: Aktuelle Zahlen und Branchentrends für den B2C Onlinehandel – jetzt hier mehr erfahren!

Das Magento-Ökosystem: von der Shop-Software zur Plattform mit Zukunft 
Entwickler blickt auf große Screens mit Code

Vom Shopsystem zur ganzheitlichen Plattform: Jetzt mehr erfahren zur Entwicklung und Zukunft von Magento und Adobe Commerce!

Microsoft Dynamics 365 in Magento: Chancen für den E-Commerce
Zahnräder mit Symbolen wie Einkaufswagen und Zielscheibe

Erfahren Sie mehr über die Vorteile der Integration von Microsoft Dynamics 365 als ERP und CRM Tool in Adobe Commerce Read more

Adobe Commerce Optimizer: Mehr Performance fürs Storefront
Bühne auf dem Adobe Summit

Mit der neuen Lösung bietet Adobe Commerce hoch performante Storefronts ohne dass ein Replatforming nötig ist. Jetzt mehr lesen!

Hyvä Commerce: Was können Shopbetreiber erwarten?
Bühne mit Präsentation der Hyva Commerce Roadmap vor Publikum

Mit Hyvä Commerce ändert Hyvä seine Produktstrategie. Was sind zentrale Aspekte der Roadmap und was heißt das für Onlinehändler? Jetzt Read more

Accessibility: ein kritischer Blick auf KI-Tools als Lösung
Runde Icons mit Accessibility Symbolen

Ab Ende Juni 2025 ist Barrierefreiheit für Webseiten und Onlineshops gesetzliche Pflicht. Helfen KI-Tools und Overlays bei der Umsetzung?

Über den Autor