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
Hartwig Göttlicher
Head of Business Development

 

Ihr Kontakt

Hartwig Göttlicher
Hartwig Göttlicher
Head of Business Development
B2B-Kundenportal: So gelingt die erfolgreiche Einführung im E-Commerce

Entdecken Sie, wie ein B2B-Kundenportal Prozesse optimiert, Effizienz steigert und Kunden begeistert. Tipps zur erfolgreichen Einführung!

Magento Open Source oder Adobe Commerce? Möglichkeiten und Erfolgsfaktoren
Zahnrad mit Pfeil-Kreislauf und Entwicklungsumgebung, im Hintergrund Laptop und Tablet-PC

Finden Sie heraus, welches System Ihren zukünftigen E-Commerce-Anforderungen entspricht und wie valantic bei der Entscheidung helfen kann.

Online-Marktplätze: Vorteile im DACH-Raum nutzen

Entdecken Sie die Vorteile von Online-Marktplätzen im DACH-Raum. Tipps zu Vorgehen, Tools & relevanten Plattformen!

Commerce Integration Suite: Die umfassende Lösung von valantic für nahtlose E-Commerce-Integration 
Laptop mit Einkaufswagen auf dem Screen und Entwicklungsumgebung drumherum

Mit unserer von Adobe akkreditierten Commerce Integration Suite machen E-Commerce-Unternehmen ihre Plattformen effizienter. Mehr erfahren!

Nachhaltiges Handeln: Mit Strategie zum Wettbewerbsvorteil im E-Commerce
Eine Gruppe junger, hipper Menschen sitzt links im Bild an einem Tisch vor einem Laptop. Sie scheinen in geschäftliche Gespräche verwickelt. Das Umfeld spiegelt ein Büro im Industrial Style. Rechts vorne im Bild ist ein Fahrrad abgestellt.

Nachhaltiges Handeln wird immer wichtiger: Zeit für Optimierung im E-Commerce. Entdecken Sie Strategien und Praxisbeispiele von mey!

AI Experience Shop von valantic: Die intelligente Zukunft des E-Commerce
Mittig im Bild steht der Schriftzug: Willkommen in der Zukunft. Darunter in einer kleineren Schriftgröße: Unser AI Experience Shop. Links der Schrift ist ein kleiner Roboter platziert. Rechts der Schrift sieht man einen aufgeklappten Laptop sowie darüber ein rotes, welliges Design-Element.

Entdecken Sie unseren valantic AI Experience Shop: KI-Lösungen für ein optimales Kundenerlebnis im E-Commerce!

Low-Code im E-Commerce: mehr Effizienz und Flexibilität
digitale Hand tippt auf einen Button mit der Schrift "Low Code Platform"

Erfahren Sie, wie Low-Code Tools die Entwicklung von E-Commerce Plattformen beschleunigen und flexibel machen. Jetzt informieren!

Adobe Analytics: Tipps zur Implementierung und Optimierung im E-Commerce
Frau schaut und zeigt auf einen Bildschirm mit statistischen Grafiken

Erfahren Sie, wie wie eine durchdachte Implementierung von Adobe Analytics im E-Commerce zum Erfolg führt und wie die Nutzung optimal Read more

Über den Autor