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
Einsatz von Adobe Edge Delivery Services im E-Commerce
Bühne auf dem Adobe Summit mit Screen von Kategorie-Seite eines Onlineshops

Entdecken Sie die neuen Adobe Edge Delivery Services für E-Commerce Frontends mit hoher Skalierbarkeit, starker Performance & einfacher Content-Publikation!

Conversion Rate: Steigerung durch datenbasierte Entscheidungen
Ein Publikum sitzt vor einer Bühne, auf der zwei Redner die Conversion Pyramide erklären

Unsere Expertise in datengetriebener Conversion Rate Optimierung entfesselt das volle Potenzial Ihres Onlineshops. Erfahren Sie hier Details!

Intelligente Personalisierung mit Adobe Sensei
Hände malen einen Schuh individuell an, daneben Hinweis auf Blogreihe Teil "2/3" und Schriftzug "Personalisierung mit Adobe Sensei"

Entdecken Sie, wie Adobe Sensei die Personalisierung im E-Commerce optimiert und zu individuellen Kundenerlebnissen in Adobe Commerce beiträgt.

Steigerung der Conversion Rate: Bessere Magento-Performance dank Hyvä Checkout
Der Zeigefinger einer Hand nähert sich dem leuchtenden Symbolbild eines Einkaufswagens vor schwarzem Hintergrund

Entdecken Sie, wie der Hyvä Checkout die Performance im E-Commerce revolutioniert und die Conversion Rate steigert. Jetzt mehr erfahren!

Zielgerichtete Personalisierung mit Magento
Hände malen einen Schuh individuell an, daneben Hinweis auf Blogreihe Teil "1/3" und Schriftzug "Personalisierung mit Adobe Commerce"

Entdecken Sie, wie Magento Personalisierung durch eine effiziente Kundensegmentierung ermöglicht und starten Sie mit einem zielgerichteten E-Commerce durch.

Optimierung des E-Commerce-Geschäfts: Warum ein regelmäßiger Shop-Relaunch wichtig ist
Hände über einem Laptop mit Symbolen: Zahnräder, Diagramme, Glühbirne, Lupe

Entdecken Sie, wie ein Shop-Relaunch mit Adobe Commerce (Magento) Ihre E-Commerce-Plattform zukunftssicher macht. Strategien für Marke, Technologien & SEO.

Interview: IoT und KI für Serviceportale nutzen
2 Personen auf Hintergrund

Erfahren Sie in Teil 2, wie IoT und KI in Kombination mit Serviceportalen das Einkaufserlebnis zukunftsfest machen und wie Magento Read more

Interview: Serviceportale – die nächste Stufe der Kundeninteraktion
Fotos von Maria Kern und Gregor Elsbeck mit Namen und Titeln vor einer Gebäudefront

Entdecken Sie in Teil 1, wie Serviceportale die traditionellen Onlineshops durch ein personalisiertes Einkaufserlebnis für die Zukunft weiterentwickeln.

Über den Autor