Geavanceerde aanpassingen van e-mailsjablonen
U kunt bestelmeldingen van klanten, marketing-e-mails, of beheerdersmeldingen versturen. E-mailsjablonen zijn een mix van HTML- en Freemarker- code. Elk sjabloon heeft berichtsleutels, variabelen en markeringen die verantwoordelijk zijn voor verschillende onderdelen van de e-mail. U kunt elk sjabloon aanpassen door de code te wijzigen, tekst toe te voegen of te verwijderen, afbeeldingen toe te voegen, tekstgrootte te wijzigen, enz.
Als u een logo wilt toevoegen aan e-mails of bedrijfsinformatie wilt wijzigen, is het voldoende om instellingen te wijzigen in de winkelbeheerder zonder de code te bewerken.
Het onderwerp van de e-mailmeldingen van klanten wijzigen
Het onderwerp is de titel die klanten zien wanneer ze een e-mail ontvangen. Door het onderwerp te wijzigen van een e-mail helpt u uw meldingen te personaliseren.
Het onderwerp van de e-mail wijzigen:
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Open in de sectie Bestelmeldingen van klanten het e-mailsjabloon dat u wilt bewerken.
- In het veld Onderwerp verwijdert u de code, voert u uw titel in en slaat u de wijzigingen op. In ons voorbeeld is de nieuwe titel "Hier is uw nieuwe bestelling":
Dat is alles. Het onderwerp van de e-mail is nu het onderwerp dat u heeft opgegeven:
Klantbegroetingen in e-mails wijzigen
Standaard beginnen alle klanten-e-mails met de begroeting "Hallo Jan Jansen", waarbij "Jan Jansen" een voorbeeld is van een naam die in elke e-mail wordt vervangen door een werkelijke klantnaam. De begroeting gaat verder met in het kort informatie over het onderwerp van de e-mail. Bijvoorbeeld, in de bestelbevestigings-e-mail is de tweede regel "We hebben uw bestelling ontvangen! Bedankt voor uw aankoop."
U kunt zowel de begroeting zelf als de volgende regels wijzigen door de berichtsleutels (ook wel rosetta-sleutels genoemd) van de e-mail te wijzigen.
Stel dat u de begroeting van de bestelbevestiging wilt wijzigen in: "Hallo Jan Jansen! Bedankt voor uw vertrouwen! We hebben uw bestelling ontvangen. We nemen contact met u op om de levertijd te bevestigen."
De begroeting in een e-mailmelding wijzigen:
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Klik op Bewerken naast een e-mailsjabloon dat u wilt bewerken. In ons voorbeeld is het e-mailsjabloon Bestelbevestiging.
- Zoek regel met berichtsleutel die het onderdeel "Hallo" bevat: <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :
- Vervang alle tekst in deze regel door uw bericht. In ons voorbeeld is het Hallo ${customer.name},
- Zoek de regel die het onderdeel bestelbevestiging bevat: <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated } />
- Vervang alle tekst in deze regel door uw bericht. In ons voorbeeld is het Bedankt voor uw vertrouwen! We hebben uw bestelling ontvangen <@orderLink/>. We nemen contact met u op om de levertijd te bevestigen.
- Sla de wijzigingen op.
Uw klanten zien nu de aangepaste begroetingen in hun bestelbevestigings-e-mails:
Tekst toevoegen aan bestelmeldingen van klanten
U kunt aangepaste tekst toevoegen aan elke e-mailmelding. Stel dat u uw klanten wilt informeren dat u een wedstrijd organiseert op Facebook. Door een korte alinea toe te voegen aan bestelbevestigings-e-mail zet uw wedstrijd in de kijker.
Een tekstalinea kan worden toegevoegd aan elk onderdeel van de e-mail. In ons voorbeeld is het de sectie "Bedankt" aan het einde van de e-mail.
Nieuwe inhoud aan het e-mailsjabloon toevoegen:
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Klik op Bewerken naast het klant-e-mailsjabloon dat u wilt bewerken.
- Zoek de sectie waar u tekst wilt toevoegen. In ons voorbeeld is het de sectie "Bedankt" die zich bevindt tussen de markeringen <!-- Store contact info and help note : start --> en <!-- Store contact info and help note : end --> onderaan het sjabloon.
- Voeg het volgende stukje code toe net boven de regel <!-- Store contact info and help note : end --> :
<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;"> VOEG HIER UW TEKSTBERICHT TOE </p> </td> </tr> - Vervang Voeg hier uw tekstbericht toe door uw eigen tekst. Het ziet er als volgt uit:
- Klik op Opslaan.
Klaar. Uw aangepast bericht verschijnt onderaan de e-mail, na uw bedankbericht. Klik op Voorbeeld sjabloon om het bewerkte e-mailsjabloon te bekijken:
Afbeeldingen toevoegen aan e-mailmeldingen
Afbeeldingen zijn nuttig wanneer u de aandacht van klanten wilt vestigen op een bepaalde gebeurtenis, bepaalde promotie, bepaald product of wat u ook maar wilt benadrukken. In uw winkel, kunt u een afbeelding in de indeling .jpeg of .img toevoegen aan elk e-mailsjabloon.
Een afbeelding toevoegen aan een e-mailsjabloon:
- Upload uw afbeelding naar een willekeurige hosting. Bijvoorbeeld ImgBB, Free Image Host of anderen.
- Open de afbeelding in uw browser en kopieer het adres van de afbeelding. Het moet eindigen op .png, .jpeg, of .img.
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Open het e-mailsjabloon dat u wilt bewerken.
- Klik op Voorbeeld sjabloon om te beslissen in welk onderdeel van de e-mail u uw afbeelding wilt laten zien. In ons voorbeeld komt de afbeelding na het onderdeel "Bedankt dat u bij ons winkelt".
- Zoek in het sjabloon het onderdeel van een e-mail waar u een afbeelding wilt toevoegen. Gebruik markeringen en berichtensleutels om door de code te navigeren. In ons voorbeeld bevindt het onderdeel “Bedankt” van de e-mail zicht tussen de regels met de code <!-- Store contact info and help note : start --> and <!-- Store contact info and help note : end --> .
- Voeg het volgende stuk code toe waar u de afbeelding wilt weergeven: <img src="URL">, waarbij URL de link is naar een afbeelding die u bij stap 2 heeft gekopieerd:
- Klik op Opslaan.
Klaar. Nu verschijnt de afbeelding in het e-mailsjabloon:
De kleur van de tekst wijzigen in de e-mailmelding
Het is mogelijk om een e-mail te brandmerken met uw bedrijfsspecifieke kleuren. In het e-mailsjabloon definieert de ${colorText} markeringen de kleuren van verschillende tekstblokken. U hoeft dus alleen maar de parameter kleur markeringen in te stellen op de HTML-code voor een specifieke kleur.
Stel dat u de kleur van de begroetingen wilt wijzigen in groen. De HTML-code voor groen is #45B212.
De tekstkleur in de e-mails wijzigen:
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Klik op Bewerken naast het e-mailsjabloon dat u wilt bewerken.
- Zoek het element ${colorText} op bij het tekstgedeelte dat u wilt bewerken. Om het proces te versnellen, drukt u op Ctrl + F (Command + F op Mac) om de markering te vinden. De tekstkleurmarkering komt boven de berichtsleutel te staan waarop deze betrekking heeft. In ons voorbeeld is dat het onderdeel begroeting:
- Vervang de ${colorText} door de HTML-kleurcode. In ons voorbeeld, is het #45B212 voor de kleur groen:
- Klik op Opslaan.
Nu is de begroeting in het e-mailsjabloon groen:
Klikbaar trackingnummer toevoegen aan een verzending met aangepast tarief
In uw winkel kunt u een trackingnummer toevoegen aan een bestelling. Uw klanten ontvangen een e-mailmeldingen over de verzonden bestelling met een klikbaar trackingnummer. Zodra ze op de titel Track uw pakket van de e-mail klikken, worden ze doorgestuurd naar de website van de vervoerder.
Maar een trackingnummer is alleen klikbaar als u door vervoerder berekende tarieven gebruikt en met UPS, USPS, FedEx, Royal Mail, Australia Post of Canada Post verzendt. Als u verzendt met vaste tarieven, aangepaste tabeltarieven, of een andere verzenddienst gebruikt, stuurt het trackingnummer kopers niet door naar de website van de vervoerder. Toch is het mogelijk om het e-mailsjabloon Bestelling verzenden handmatig te bewerken om een trackingnummer klikbaar te maken, zodat uw klanten worden doorgestuurd naar de website van een vervoerder om hun bestelling te volgen.
Een link naar een trackingpagina op de website van een vervoerder toevoegen:
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Open in de sectie Bestelmeldingen van klanten het e-mailsjabloon Bestelling verzonden.
- Zoek het stuk code in het sjabloon dat begint met "Order tracking number : start" en eindigt met "Order tracking number : end". Meestal is het 73-102 regels code:
- Vervang bovenstaande code door de volgende, waar LINK_TO_CARRIERS_WEBSITE de werkelijke link is naar de website waar een klant zijn bestelling kan volgen:
<!-- 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 --> - Klik op Opslaan.
Nu ontvangen uw klanten een e-mail met een link naar de website van uw vervoerder. Zodra ze op een link klikken, worden ze doorgestuurd naar een website die u heeft opgegeven in het e-mailsjabloon. Op de website kunnen ze een trackingnummer opgeven uit de e-mail dat de bestelling is verzonden.
Het blok bestellingen herhalen toevoegen
Met bestellingen herhalen, kunnen uw klanten artikelen opnieuw bestellen door op de knop "Opnieuw kopen" te klikken in de bestelbevestigings-e-mail die ze voor de oorspronkelijke bestelling hebben ontvangen. Indien u uw bestelbevestigingssjabloon heeft aangepast voordat herhaalbestellingen beschikbaar werden in uw winkel, kunt u dit blok handmatig toevoegen.
Het blok bestellingen herhalen toevoegen:
- Ga in de winkelbeheerder naar Instellingen → Meldingen.
- Open in de sectie Bestelmeldingen van klanten het e-mailsjabloon Bestelbevestiging.
- Zoek de regel <!-- block-related-products: end --> of een andere plaats waar u wilt dat het blok verschijnt en voeg het volgende stuk code toe:
<!-- 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 --> - Klik op Opslaan.
Nu zien uw klanten het blok bestellingen herhalen in hun bestelbevestigings-e-mails: