Erweiterte Anpassung von E-Mail-Vorlagen in Ecwid
Sie können in Ecwid Bestellbenachrichtigungen für Kunden, Marketing-E-Mails oder Adminbenachrichtigungen versenden. E-Mail-Vorlagen sind eine Mischung aus HTML- und Freemarker-Code. Jede Vorlage hat Nachrichtenschlüssel, Variablen und Markierungen, die für verschiedene Teile der E-Mail verantwortlich sind. Sie können jede Vorlage anpassen, indem Sie ihren Code ändern: Text hinzufügen oder entfernen, Bilder hinzufügen, Textgröße oder -farbe ändern usw.
Wenn Sie den E-Mails ein Logo hinzufügen oder die Firmendaten ändern möchten, genügt es, die Einstellungen in Ihrer Ecwid-Verwaltung zu ändern, ohne den Code zu bearbeiten.
Ändern des Betreffs von Kunden-E-Mails
Der Betreff ist der Titel, den Kunden sehen, wenn sie eine E-Mail erhalten. Wenn Sie den Betreff einer E-Mail ändern, können Sie Ihre Benachrichtigungen personalisieren.
Um den Betreff der E-Mail zu ändern:
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Öffnen Sie im Bereich Kunden-Bestellbenachrichtigungen die E-Mail-Vorlage, die Sie bearbeiten möchten.
- Entfernen Sie im Feld Betreff den Code, geben Sie Ihren Titel ein und speichern Sie die Änderungen. Der neue Titel könnte lauten „Hier ist Ihre neue Bestellung“:
Das war's. Der Betreff der E-Mail wird nun der von Ihnen angegebene sein:
Ändern von Kundengrüßen in E-Mails
Standardmäßig beginnen alle Kunden-E-Mails mit der Begrüßung „Hallo Benutzername“, wobei „Benutzername“ in jeder E-Mail durch einen tatsächlichen Kundennamen ersetzt wird. Die Begrüßung wird mit einer kurzen Info zum Betreff der E-Mail fortgesetzt. In der E-Mail zur Bestellbestätigung könnte die zweite Zeile zum Beispiel lauten: „Wir haben Ihre Bestellung erhalten! Vielen Dank für Ihre Bestellung“.
Sie können sowohl die Begrüßung selbst als auch die folgenden Zeilen ändern, indem Sie die rosetta.message-Schlüssel der E-Mail ändern.
Nehmen wir an, Sie möchten die Begrüßung in der Bestellbestätigung ändern zu: „Hey Benutzername! Vielen Dank für Ihr Vertrauen! Wir haben Ihre Bestellung erhalten. Wir werden Sie bald kontaktieren, um die Lieferzeit zu bestätigen.“
So ändern Sie die Begrüßung in einer E-Mail-Benachrichtigung:
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Klicken Sie neben der Vorlage, die Sie ändern möchten, auf Bearbeiten. In unserem Beispiel ist es die E-Mail-Vorlage Bestellbestätigung.
- Suchen Sie die Zeile mit dem Nachrichtenschlüssel, die den Teil mit „Hallo“ enthält: <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :
- Ersetzen Sie den ganzen Text in dieser Zeile mit Ihrer Nachricht. In unserem Beispiel: Hey ${customer.name},
- Suchen Sie die Zeile, die den Teil mit der Bestellbestätigung enthält: <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated } />
- Ersetzen Sie den gesamten Text in dieser Zeile durch Ihre Nachricht. In unserem Beispiel: Vielen Dank für Ihr Vertrauen! Wir haben Ihre Bestellung <@orderLink/> erhalten. Wir werden Sie bald kontaktieren, um die Lieferzeit zu bestätigen.
- Speichern Sie Ihre Änderungen.
Jetzt sehen Ihre Kunden die benutzerdefinierten Grüße in ihren Bestellbestätigungs-E-Mails:
Hinzufügen von Text zu Bestellbenachrichtigungen für Kunden
Sie können jeder E-Mail-Benachrichtigung einen eigenen Text hinzufügen. Nehmen wir an, Sie möchten Ihre Kunden darüber informieren, dass Sie ein Gewinnspiel auf Facebook veranstalten. Wenn Sie einen kurzen Absatz in die Bestellbestätigungs-E-Mail einfügen, wird Ihr Gewinnspiel in den Vordergrund gerückt.
Textparagraphen können an jeder beliebigen Stelle der E-Mail eingefügt werden. In unserem Beispiel ist es der Abschnitt mit dem „Danke“ am Ende der E-Mail.
So fügen Sie der E-Mail-Vorlage einen neuen Inhalt hinzu:
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Klicken Sie neben der Vorlage, die Sie ändern möchten, auf Bearbeiten.
- Suchen Sie den Abschnitt, in dem Sie Text hinzufügen möchten. In unserem Beispiel ist es der „Danke“-Abschnitt, der sich zwischen <!-- Store contact info and help note : start --> und <!-- Store contact info and help note : end --> am unteren Ende der Vorlage befindet.
- Fügen Sie das folgende Codestück direkt oberhalb von <!-- Store contact info and help note : end --> hinzu:
<tr> <td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;"> <p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px; color: ${colorText}; margin: 0; padding: 0;"> IHRE TEXTNACHRICHT </p> </td> </tr>
- Ersetzen Sie Ihre Textnachricht durch Ihren eigenen Text. So sollte es dann aussehen:
- Klicken Sie auf Speichern.
Fertig. Ihre individuelle Nachricht erscheint nun am Ende der E-Mail, direkt nach der Dankesnachricht. Klicken Sie auf Vorlagenvorschau, um die aktualisierte E-Mail-Vorlage zu sehen:
Hinzufügen von Bildern zu E-Mail-Benachrichtigungen
Bilder sind nützlich, wenn Sie die Aufmerksamkeit der Kunden auf ein bestimmtes Event, eine Werbeaktion, ein Produkt usw. lenken möchten. In Ecwid können Sie jeder E-Mail-Vorlage ein Bild im .jpeg- oder .img-Format hinzufügen.
So fügen Sie ein Bild zu einer E-Mail-Vorlage hinzu:
- Laden Sie Ihr Bild bei einem beliebigen Hosting-Anbieter hoch. Zum Beispiel: ImgBB, Free Image Host.
- Öffnen Sie das Bild in Ihrem Browser und kopieren Sie die Bildadresse. Sie sollte auf .png, .jpeg oder .img enden.
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Öffnen Sie die E-Mail-Vorlage, die Sie bearbeiten möchten.
- Klicken Sie auf Vorlagenvorschau, um zu entscheiden, an welcher Stelle der E-Mail Ihr Bild erscheinen soll. In unserem Beispiel kommt das Bild nach dem Teil mit „Vielen Dank für Ihren Einkauf bei uns“.
- Suchen Sie in der Vorlage den Teil der E-Mail, in den Sie ein Bild einfügen möchten. Verwenden Sie Textauszeichnungen und Nachrichtenschlüssel, um im Code zu navigieren. In unserem Beispiel befindet sich der „Danke“-Teil der E-Mail zwischen den Codezeilen <!-- Store contact info and help note : start --> und <!-- Store contact info and help note : end -->.
- Fügen Sie den folgenden Code an der Stelle ein, an der Sie das Bild anzeigen möchten: <img src="URL">, wobei URL der Link zu dem Bild aus Schritt 2 ist:
- Klicken Sie auf Speichern.
Fertig. Ihr Bild erscheint nun in der E-Mail-Vorlage:
Ändern der Farbe des Textes in der E-Mail-Benachrichtigung
Es ist möglich, eine E-Mail mit Ihren unternehmensspezifischen Farben zu versehen. In der E-Mail-Vorlage definiert die Auszeichnung ${colorText} die Farben der verschiedenen Textblöcke. Sie müssen also lediglich den Parameter für die Farbauszeichnung auf den HTML-Code einer bestimmten Farbe setzen.
Nehmen wir an, Sie möchten die Farbe der Begrüßung in Grün ändern. Der HTML-Code für die Farbe Grün ist #45B212.
So ändern Sie die Textfarbe in den E-Mails:
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Klicken Sie neben der Vorlage, die Sie ändern möchten, auf Bearbeiten.
- Suchen Sie das Element ${colorText} in der Nähe des Textabschnitts, den Sie aktualisieren möchten. Um den Vorgang zu beschleunigen, drücken Sie Strg + F (Command + F auf Mac), um die Auszeichnung zu finden. Die Auszeichnung für die Textfarbe steht über dem Nachrichtenschlüssel, auf den sie sich bezieht. In unserem Beispiel ist es der Grußteil:
- Ersetzen Sie ${colorText} durch den HTML-Farbcode. In unserem Beispiel #45B212 für die Farbe Grün:
- Klicken Sie auf Speichern.
Jetzt ist die Begrüßung in der E-Mail-Vorlage grün:
Hinzufügen von anklickbarer Trackingnummer zu benutzerdefiniertem Versandtarif
In Ecwid können Sie einer Bestellung eine Trackingnummer hinzufügen. Ihre Kunden erhalten eine E-Mail-Benachrichtigung über den Versand der Bestellung mit einer anklickbaren Trackingnummer. Sobald Sie in der E-Mail auf den Titel Verfolgen Sie Ihr Paket klicken, werden Sie auf die Website des Versandunternehmens weitergeleitet.
Eine Trackingnummer kann jedoch nur angeklickt werden, wenn Sie vom Versandanbieter berechnete Tarife verwenden und mit UPS, USPS, FedEx, Royal Mail, Australia Post oder Canada Post versenden. Wenn Sie mit Pauschaltarifen, benutzerdefinierten Tabellentarifen oder einem anderen Versanddienstleister versenden, leitet die Trackingnummer die Käufer nicht auf die Website des Versanddienstleisters weiter. Es ist jedoch möglich, die E-Mail-Vorlage „Bestellung versendet“ manuell zu bearbeiten, um eine Trackingnummer anklickbar zu machen, so dass Ihre Kunden auf die Website eines Transportunternehmens weitergeleitet werden und ihre Bestellung verfolgen können.
So fügen Sie einen Link zur Trackingseite des Spediteurs hinzu:
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Öffnen Sie im Abschnitt Kunden-Bestellbenachrichtigungen die E-Mail-Vorlage Bestellung versendet.
- Suchen Sie den Teil des Codes in der Vorlage, der mit „Order tracking number start“ beginnt und mit „Order tracking number end“ endet. Normalerweise sind es die Codezeilen 73–102:
- Ersetzen Sie den obigen Code durch den folgenden, wobei LINK_TO_CARRIERS_WEBSITE der eigentliche Link zu der Seite ist, auf der ein Kunde seine Bestellung verfolgen kann:
<!-- Order tracking number : start --> <#if order.trackingNumber?has_content> <tr> <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 35px;"> <#if order.shippingMethod.carrierName?has_content> <b><@rosetta.message key="OrderShipped.OrderTracking.number_with_shipping_method" params={ "carrierName": order.shippingMethod.carrierName } /></b> <#else> <b><@rosetta.message key="OrderShipped.OrderTracking.number" /></b> </#if> </td> </tr> <tr> <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 24px;line-height: 30px;padding-top: 1px; color: #333333;"> ${order.trackingNumber} </td> </tr> <#if order.trackingUrl?has_content> <tr> <td align="center" valign="top" style="font-family: Arial,sans-serif;font-size: 14px;line-height: 24px;padding-top: 16px;color: #333333;"> <a href="LINK_TO_CARRIERS_WEBSITE" style="text-decoration: none;"><b><@rosetta.message key="OrderShipped.OrderTracking.link_text" /></b></a> </td> </tr> </#if> <tr> <td style="font-size:1px; line-height: 23px;"> </td> </tr> <!-- Order tracking number : end -->
- Klicken Sie auf Speichern.
Jetzt erhalten Ihre Kunden eine E-Mail mit einem Link zur Website Ihres Versandanbieters. Sobald sie auf den entsprechenden Link klicken, werden sie zu der Website weitergeleitet, die Sie in der E-Mail-Vorlage angegeben haben. Auf dieser Website können Ihre Kunden dann die Trackingnummer aus der E-Mail „Bestellung versendet“ angeben.
Hinzufügen des Blocks für wiederholte Bestellungen
Mit wiederholten Bestellungen können Ihre Kunden Artikel nachbestellen, indem sie in einer Bestellbestätigungs-E-Mail auf die entsprechende Schaltfläche klicken. Falls Sie Ihre Vorlage für die Bestellbestätigung angepasst haben, bevor wiederholte Bestellungen implementiert wurden, können Sie diesen Block manuell hinzufügen.
Um den Block für wiederholte Bestellungen hinzuzufügen:
- Gehen Sie von Ihrer Ecwid-Verwaltung aus zu Einstellungen → Benachrichtigungen.
- Öffnen Sie im Abschnitt Kunden-Bestellbenachrichtigungen die E-Mail-Vorlage Bestellbestätigung.
- Suchen Sie die Zeile <!-- block-related-products: end --> – oder eine andere Stelle, an der der Block erscheinen soll – und fügen Sie das folgende Codestück hinzu:
<!-- block-repeat-order: start --> <#if repeatOrder??> <tr> <td align="left" valign="top" style="padding-top: 40px;"> <table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-width: 100%;"> <tr> <td align="left" valign="top" style="<@styleSubtitle />"> <@rosetta.message key="OrderConfirmation.RepeatOrder.title" /> </td> </tr> <tr> <td align="left" valign="top" style="padding-top: 10px; <@styleText />"> <@rosetta.message key="OrderConfirmation.RepeatOrder.description" /> </td> </tr> <tr> <td align="left" valign="top" style="padding-top: 20px;"> <#assign goToStoreButtonText><@rosetta.message key="OrderConfirmation.RepeatOrder.button" /></#assign> <@secondaryButton repeatOrder.url goToStoreButtonText 290 colorBlue "full-width-mobile" /> </td> </tr> </table> </td> </tr> </#if> <!-- block-repeat-order: end -->
- Klicken Sie auf Speichern.
Jetzt sehen Ihre Kunden in den Bestellbestätigungs-E-Mails den Block für Nachbestellungen: