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
KI im E-Commerce: Lösungsansätze für ein erfolgreiches digitales Projekt
Roboter, der einen Einkaufswagen schiebt, der mit Paketen gefüllt ist

Erfahren Sie, wie KI im E-Commerce die Personalisierung und Kundenbindung verbessert. Lesen Sie mehr zu Chatbots und KI-Landingpages.

Digitale Trends 2024: Adobe Experience Cloud liefert flexible Lösungen
Der Betrachter schaut frontal auf einen Menschen, der an einem Tisch sitzt. Dieser ist so weit rangezoomt, dass man nur einen winzigen Teil des Oberkörpers mit einem blauen Hemd über der Tischkante sieht. Im Vordergrund links ist seine Hand zu sehen, die über einem Smartphone verweilt - bereit zur nächsten Aktion. Mittig im Bild befindet sich ein klassisches Suchfeld, in das "2024 Trends" eingetippt wurde.

Digitale Trends erfordern Anpassungen. Die Adobe Experience Cloud liefert flexible Lösungen für den E-Commerce. Jetzt informieren!

IT-Infrastruktur im E-Commerce: Interview zur effizienten Systemintegration von SAP und Magento
Timo Rüb, Christian Münch und Volker John sitzen nebeneinander in Sesseln und unterhalten sich

Erfahren Sie in unserem Interview, wie der valantic SAP Connector eine nahtlose SAP Magento Integration für Ihre IT-Infrastruktur ermöglicht!

Verkaufseinheiten im E-Commerce: Feature für die Mengenumrechnung bei EUROBAUSTOFF
Collage aus Bildern, die Beschäftigte unterschiedlicher Branchen bei der Arbeit zeigen.

Feature zur Mengenumrechnung bei EUROBAUSTOFF: Über Verkaufseinheiten zur Bestellmenge – schnelle Ermittlung. Jetzt mehr erfahren!

Magento Features mit Hyvä effizient nutzen 
Team von Entwicklern, die an einem Tisch mit PC-Bildschirm stehen

Erfahren Sie, wie Hyvä die Effizienz und Performance der Features von Magento bzw. Adobe Commerce maximiert. Jetzt lesen und Booster Read more

Effiziente Datenmigration mit Magento und Adobe Commerce 
Laptop mit schematischer Darstellung von Datenströmen

Erfahren Sie, wie valantic mit MIGRON® eine reibungslose Datenmigration zu Magento garantiert. Jetzt informieren und Replatforming meistern!

Storyblok: Maximales Potenzial mit Custom Plugins
Abgebildet ist ein Ausschnitt einer Rechner-Tastatur, auf der zwei kleine Miniatur-Einkaufswagen stehen

Erfahren Sie, wie passende Plugins in Storyblok das Nutzererlebnis optimieren und Ihren E-Commerce-Erfolg steigern. Jetzt informieren!

Visuelle Ersatzteilbestellung mit Explosionszeichnung im E-Commerce
Collage aus Bildern, die Beschäftigte unterschiedlicher Branchen bei der Arbeit zeigen.

Entdecken Sie, wie Explosionszeichnungen die Bestellung im B2B E-Commerce vereinfachen und die Kundenzufriedenheit steigern!

Über den Autor