Schönere E-Mails aus Shopware versenden - so geht's (Tutorial)

08.08.2024

Die Mails, die standardmäßig aus Shopware versendet werden, sind optisch nicht besonders ansprechend. Du kannst zwar einen Header und Footer einrichten, das ändert aber in der Regel nicht viel am Gesamteindruck.

Dabei kannst du mit wenigen Einstellungen bereits viel bewirken - und deine Mails nicht nur lesbarer machen, sondern auch einen Wiedererkennungseffekt erreichen (Branding).

👉 Achtung, für dieses Tutorial ist große Sorgfalt oder wenigstens rudimentäre Kenntnisse in HTML und CSS nötig. Fehler können dazu führen, dass der Shop gar keine Mails mehr versendet (ohne Fehlermeldung). Solltest du unsicher sein, kannst du die Bearbeitung deiner Mails auch gern an uns outsourcen. Das gilt auch, wenn du weitere Ideen für die Verbesserung deiner Mails hast. Sprich uns einfach an.

Der Versand von E-Mails ist eine der wichtigsten Funktionen in einem Online-Shop: Sei es der Double-OptIn für den Newsletter (zur Bestätigung der Anmeldung), die Bestätigung einer Bestellung oder ein Update des Bestellstatus, oder aber auch eine Marketing-Mail, wie z. B. eine Meldung über die Wiederverfügbarkeit - Mails stellen einen permanenten Kontakt zu Kunden und solchen, die es werden wollen, dar.

Ich habe diese Erfahrung gerade schmerzhaft in meinem eigenen neuen Shop gemacht: Ich habe meine bestehenden Coaching-Kunden und Newsletter-Abonnenten eingeladen, die Landhaus News des Shops zu abonnieren. Viele sind dieser Einladung gefolgt - aber nicht ein einziger hat die Anmeldung bestätigt. Die Suche nach der Ursache führte mich zu einer völlig nichtssagenden Mail mit unsichtbarem Bestätigungslink (und fehlendem Impressum, typischer Anfängerfehler 😣😂).

Damit du weißt, wovon ich spreche, habe ich hier mal zwei Vorher-Nachher Bilder für dich.

Newsletter Bestätigung vorher
(zum Vergrößern klicke einfach auf das jeweilige Bild)

Newsletter Bestätigung nachher

Bestellbestätigung für den Kunden vorher

Bestellbestätigung für den Kunden nachher

Von dem Text mal abgesehen, der ja sowieso geändert werden kann, weisen die neuen Mails nicht nur eine größere Schrift in einer besser lesbaren Schriftart (finde ich) auf, sondern sind auch mit Logo und grau hinterlegtem Impressum versehen. Zudem ist der Link im Double-Optin auf meinen speziellen Wunsch als Button hervorgehoben worden.

Ready? Dann lass uns jetzt loslegen - Schritt für Schritt.

Logo im Header

Lass uns zuerst das Logo im Header einbinden.

💁‍♀️ Den Link zum Logobild findest du in deinem Medienordner. Gehe auf Inhalte → Medien und gib oben im Suchfeld einige Zeichen aus dem Logonamen (i.d.R. "logo" oder der Name deiner Marke) ein. Wenn dir das Bild unten angezeigt wird, klicke auf die drei Punkte in der rechten oberen Ecke des Bildes und wähle "Link kopieren". Dein Bild sollte ca. 400 - 600px breit sein. Die Größe wird dir rechts in der Infobox angezeigt, wenn du das Bild anklickst.

Gehe auf Einstellungen → E-Mail Templates. Scrolle dort runter bis zur Tabelle "Kopf- und Fußzeilen". Öffne die "Standard-E-Mail-Fußzeile".

💁‍♀️ Der Name ist etwas verwirrend. Es handelt sich hier um eine Standard-Einstellung für Kopf- UND Fußzeile. Es ist zwingend erforderlich, dass du unter "Verkaufskanäle" deinen Verkaufskanal wählst, damit die Einstellung greift.

Du hast dort nun jeweils zwei Kopfzeilen (Text + HTML) sowie zwei Fußzeilen (Text + HTML). Text ist einfach - trage dort ein, was in der Mail über bzw. unter dem Mailtext stehen soll, und zwar genau so, wie es dort stehen soll (ein Zeilenumbruch im Feld ist ein Zeilenumbruch in der Mail). Beachte, dass auch die Textversion deiner Mails zwingend ein Impressum benötigt, das ist aber auch alles, was es dazu zu sagen gibt.

Lass uns die HTML Version anschauen. Nur in dieser ist es möglich, ein Logobild einzufügen.

Kopiere dazu unter Kopfzeile → HTML folgenden Code:

<div style="max-width: 600px; margin: auto;">
  <a href="LINK-ZUM-SHOP"> 
    <img style="width: 400px;" src="LINK-ZUM-BILD" alt="NAME-DEINES-SHOPS" /> 
  </a>
</div>
<div style="max-width: 600px; margin: auto;">

Ersetze LINK-ZUM-SHOP, LINK-ZUM-BILD und NAME-DEINES-SHOPS durch deine individuellen Angaben.

Damit ist das Logo zentriert in der Mail eingebunden.

Impressum im Footer

Widmen wir uns als nächstes dem Impressum im Footer (Fußzeile).

Kopiere dazu folgenden Code ins Feld Fußzeile → HTML:

<div style="background-color: #eeeeee; text-align: center; padding: 30px 0;">
  <p class="small"><strong>Impressum</strong></p>
  <p class="small">{{salesChannel.name}} DEINE-ADRESSE</p>
  <p class="small">LINK-ZUM-SHOP | E-MAIL-ADRESSE</p>
</div>

Ersetze DEINE-ADRESSE, LINK-ZUM-SHOP und E-MAIL-ADRESSE durch deine individuellen Daten.

Du kannst weitere Zeilen hinzufügen, indem du sie kopierst und den Inhalt zwischen den spitzen Klammern anpasst. Einfache Zeilenumbrüche erzeugst du durch Einfügen eines <br>.

Die Klasse "small" (class="small") sorgt dafür, dass die Daten im Impressum etwas kleiner angezeigt werden als der Rest (siehe Screenshot oben). Dafür sorgen wir gleich. Wenn du das nicht möchtest, lass diese Angabe einfach weg.

Der Farbcode #eeeeee sorgt für einen grauen Hintergrund. Wenn du eine andere Farbe wünschst, trage dort einen anderen Hex-Farbcode ein. Wenn deine Schrift eine andere Farbe benötigt, z. B. weiß, kannst du hinter der Angabe für padding mittels Semikolon getrennt die Eigenschaft color angeben, z. B. so:

<div style="background-color: #000000; text-align: center; padding: 30px 0; color: #ffffff;">

In diesem Beispiel ist der Hintergrund schwarz (#000000) und die Schriftfarbe weiß (#ffffff).

Allgemeine Layout-Einstellungen

Da ich die Schriftgröße und Schriftart nur an einer einzigen Stelle zentral pflegen möchte, habe ich im Header einen style-Abschnitt ergänzt. Trage über deinem bereits eingefügten Code folgende Zeilen ein und passe sie an:

<style>
    * { font-family: Verdana; color: #666666; font-size: 15px;}
    p, li { font-size: 15px;}
    p.small {font-size: 12px; }
    a { color: #c3161d; text-decoration: none;}
</style>

Diese Zeilen setzen "Verdana" als Hauptschriftart in einer Größe von 15px. Falls du bereits mit CSS für Websites gearbeitet hast, beachte, dass E-Mail Clients weit weniger CSS-Befehle kennen und relative Schriftgrößen (em, rem) nicht immer verstanden werden. Mit absoluter Schriftgröße und Systemschriften bist du auf der sicheren Seite.

Mehr über Schriftarten in E-Mails findest du in diesem Artikel von MailChimp.

Die Einstellungen für a sind für Links, die in der LandhausRabe Farbe #c3161d (dunkelpink 😋) dargestellt werden.

Wichtig - Shopware setzt in fast allen Mailtemplates die Schriftart Arial und die Schriftgröße 12px als Standard. Wenn du die Einstellungen im Header vorgenommen hast, kannst du deine Mailtemplates eines nach dem anderen durchgehen und die entsprechende Passage entfernen. Du findest sie im Feld "HTML" in der Regel in der ersten Zeile.

Ich habe dir die entsprechende Stelle im Screenshot markiert. Achte darauf, nur den markierten Abschnitt zu löschen (nicht das div davor und nicht die schließende Klammer > danach).

Bestätigungslink als Button

Wer sich zum Newsletter anmeldet, muss diese Anmeldung bestätigen. Vorher dürfen keine Newsletter versendet werden.

Die Wahrscheinlichkeit der Bestätigung steigt, wenn die Double-Optin Mail als vertrauenswürdig eingestuft wird und gut erkennbar ist, dass eine Bestätigung erfolgen muss.

Um das zu erreichen, habe ich nicht nur den Betreff und den Text der Bestätigungsmail angepasst, sondern mir den Link auch gleich als gut sichtbaren Button hervorheben lassen.

Dazu tauschst du das vorhandene <a href="{{ url }}">hier</a> durch folgenden Code aus:

<button style="background: #c23d4f; border: 1px solid #c23d4f; padding: 5px; border-radius: 5px;">
  <a href="{{ url }}" style="color: #fff;">Ja, ich will die Landhaus News</a>
</button>

Du kennst es schon: Tausche die Farbcodes gegen deine eigenen Farben aus. border-radius sorgt für abgerundete Ecken (wenn du das nicht willst, lösch es raus). border ist der Rahmen (Dicke, Art, Farbe). Wenn du Detailfragen dazu hast, schreib sie gerne unten in die Kommentare 👇

Testen, Testen, Testen

Ein Test-Kundenkonto ist immer praktisch, noch besser ist ein separater Testshop, der von deiner Produktivumgebung vollständig abgekoppelt ist. Dort kannst du deine Anpassungen in Ruhe feinschleifen, so dass du sie erst dann in den echten Shop kopierst, wenn alles perfekt ist.

Teste deine Einstellungen, indem du Newsletter Opt-In und Bestellmails an dich senden lässt. So kannst du am besten sehen, ob schon alles passt.

Werden keine Mails versendet, liegt ein Syntaxfehler vor, d. h. es wird ein ungültiger Wert verwendet oder eine Klammer wurde nicht geschlossen.

Wie du das richtige Layout "findest"

Es geht immer noch ein bißchen besser. Um Inspirationen zu finden, empfehle ich dir den einfachsten Weg: Schau dir Mailings anderer Online-Shops an. Was gefällt dir? Was möchtest du gerne übernehmen? Theoretisch ist alles machbar, und in der Praxis meistens auch.

Wenn du dabei Hilfe brauchst, findest du uns hier.

Viel Spaß beim Gestalten,

Bettina

PS: Wenn du es ausprobierst, und Fragen bei dir auftauchen, schreibe sie gerne in die Kommentare. Die Wahrscheinlichkeit ist hoch, dass es noch jemanden da draußen gibt, der sich dieselbe Frage stellt 😎

Sharing is caring - teile den Beitrag

Ähnliche Beiträge

Beitrag kommentieren