Personalizzazione avanzata dei modelli di e-mail in Ecwid
Ecwid consente di inviare notifiche ai clienti in merito ai loro ordini, nonché e-mail di marketing e notifiche amministratore. I modelli di e-mail sono una combinazione di codice HTML e codice Freemarker. Ogni modello ha le chiavi del messaggio, le variabili e i markup responsabili per i vari blocchi dell'e-mail. È possibile personalizzare i modelli modificandone il codice: aggiungere o rimuovere testi, aggiungere immagini, cambiare la dimensione e il colore dei caratteri, ecc.
Se si desidera aggiungere un logo alle proprie e-mail oppure modificare le informazioni dell'azienda, ciò può essere fatto nelle impostazioni del proprio pannello di controllo di Ecwid, senza dover modificare il codice.
Cambiare l'oggetto di una notifica e-mail
L'oggetto è il titolo che i clienti vedono quando ricevono un'e-mail. Modificando l'oggetto di un'e-mail è possibile personalizzare la propria notifica.
Per modificare l'oggetto di un'e-mail:
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Nella sezione Notifiche dell'ordine del cliente, aprire il modello di e-mail che si desidera modificare.
- Nel campo Oggetto, rimuovere il codice, inserire il testo desiderato e salvare le modifiche. Nel nostro esempio, il nuovo oggetto è "Ecco il tuo nuovo ordine":
Fatto. Ora, l'oggetto dell'e-mail apparirà come specificato:
Cambiare la formula iniziale delle e-mail
Per impostazione predefinita, tutte le e-mail inviate ai clienti iniziano con "Salve John Darling", dove "John Darling" è un nome di esempio che in ciascuna e-mail sarà sostituito con il nome reale del cliente. Dopo la formula iniziale seguono brevi informazioni sull'oggetto dell'e-mail. Ad esempio, nell'e-mail di conferma dell'ordine, la seconda riga sarebbe "Abbiamo ricevuto il tuo ordine! Grazie per il tuo acquisto".
È possibile modificare sia la formula iniziale che le frasi successive cambiando le chiavi rosetta.message del messaggio.
Supponiamo che si voglia cambiare la formula iniziale dell'e-mail di conferma dell'ordine e scrivere: "Ciao John Darling! Grazie per la fiducia! Abbiamo ricevuto il tuo ordine. Ti contatteremo a breve per confermare l'orario di consegna."
Per cambiare la formula iniziale di una notifica e-mail:
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Fare clic su Modifica accanto al modello di e-mail che si desidera modificare. Nel nostro esempio, è il modello della notifica di Conferma d'ordine.
- Trovare la chiave del messaggio che contiene la formula iniziale: <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :
- Sostituire interamente il testo di questa riga con il messaggio desiderato. Nel nostro esempio, il nuovo testo è Ciao ${customer.name},
- Trovare la riga che contiene il blocco di conferma dell'ordine: <@rosetta.message key="OrderConfirmation.Confirmation.paid_order" params={ "storeName": store.name?html, "dateCreated": order.dateCreated } />
- Sostituire interamente il testo di questa riga con il messaggio desiderato. Nel nostro esempio, il nuovo testo è Grazie per la fiducia! Abbiamo ricevuto il tuo ordine <@orderLink/>. Ti contatteremo a breve per confermare l'orario di consegna.
- Salvare le modifiche.
Ora, nelle notifiche di conferma dell'ordine i clienti vedranno la formula iniziale personalizzata:
Aggiungere del testo alle notifiche in merito agli ordini inviate ai clienti
È possibile aggiungere dei testi personalizzati a qualsiasi notifica e-mail. Supponiamo che si desideri informare i clienti di un concorso su Facebook. Per attirare l'attenzione dei clienti al concorso, è possibile aggiungere un breve paragrafo alla notifica e-mail di conferma dell'ordine.
Un paragrafo di testo può essere inserito in qualsiasi blocco dell'e-mail. Nel nostro esempio, apparirà nel blocco "Grazie" nella parte finale dell'e-mail.
Per aggiungere dei contenuti a un modello di e-mail:
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Fare clic su Modifica accanto al modello di e-mail che si desidera modificare.
- Trovare il blocco al quale si desidera aggiungere del testo. Nel nostro esempio, è il blocco "Grazie!" che si trova tra i markup <!-- Store contact info and help note : start --> e <!-- Store contact info and help note : end --> nella parte bassa del modello.
- Aggiungere il seguente pezzo di codice immediatamente sopra la riga <!-- 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;"> INSERIRE QUI IL TESTO DESIDERATO </p> </td> </tr> - Sostituire la dicitura Inserire qui il testo desiderato con il proprio testo personalizzato. Ecco come dovrebbe apparire:
- Premere Salva.
Fatto. Il contenuto personalizzato apparirà nella parte finale dell'e-mail, dopo il blocco Grazie. Fare clic su Anteprima modello per visualizzare il modello aggiornato:
Aggiungere immagini alle notifiche e-mail
Le immagini sono utili per attirare l'attenzione dei clienti a un evento, una promozione, uno specifico prodotto o qualsiasi altro elemento si desideri mettere in evidenza. In Ecwid, è possibile aggiungere immagini in formato .jpeg o .img a qualsiasi modello di e-mail.
Per aggiungere un'immagine a un modello di e-mail:
- Caricare l'immagine su qualsiasi hosting di immagini. Ad esempio, ImgBB, Free Image Host o altri.
- Aprire l'immagine nel browser e copiarne l'indirizzo. Deve finire con .png, .jpeg o .img.
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Aprire il modello di e-mail che si desidera modificare.
- Fare clic su Anteprima modello per decidere in quale parte dell'e-mail deve apparire l'immagine. Nel nostro esempio, apparirà dopo il blocco "Grazie per aver fatto acquisti presso di noi".
- Nel modello, trovare il blocco nel quale inserire l'immagine. Usare i markup e le chiavi del messaggio per orientarsi nel codice. Nel nostro esempio, il blocco "Grazie" dell'e-mail si trova tra le righe <!-- Store contact info and help note : start --> e <!-- Store contact info and help note : end --> del codice.
- Aggiungere il seguente pezzo di codice nella posizione in cui si desidera che sia visualizzata l'immagine: <img src="URL">, dove l'URL è il link dell'immagine copiato nel passaggio 2:
- Premere Salva.
Fatto. L'immagine apparirà nel modello di e-mail:
Cambiare il colore del testo della notifica e-mail
È possibile personalizzare le e-mail con i colori del proprio brand. Il markup ${colorText} definisce il colore dei vari blocchi di testo nei modelli di e-mail. Pertanto, tutto ciò che bisogna fare è impostare per questo parametro il codice colore HTML desiderato.
Supponiamo di voler usare il colore verde per la formula iniziale. Il codice HTML del verde è #45B212.
Per cambiare il colore dei testi nelle e-mail:
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Fare clic su Modifica accanto al modello di e-mail che si desidera modificare.
- Trovare l'elemento ${colorText} accanto al blocco di testo da aggiornare. Per accelerare la ricerca, premere Ctrl + F (Comando + F su Mac) per trovare il rispettivo markup. Il markup relativo al colore del testo si trova sopra la chiave del messaggio a cui si riferisce. Nel nostro esempio, è il blocco della formula iniziale:
- Sostituire ${colorText} con il codice HTML del colore desiderato. Nel nostro esempio, è il codice #45B212 del colore verde:
- Premere Salva.
Ora la formula iniziale nel modello di e-mail è di colore verde:
Aggiungere un numero di tracciabilità in caso di tariffe di spedizione personalizzate
In Ecwid, è possibile specificare il numero di tracciabilità di un ordine. I clienti riceveranno una notifica e-mail contenente i dettagli dell'ordine spedito e il numero di tracciabilità cliccabile. Cliccando sulla dicitura Traccia il tuo pacchetto nell'e-mail saranno reindirizzati al sito del corriere.
Tuttavia, i numeri di spedizione sono cliccabili solo se si usano le tariffe calcolate dai corrieri in tempo reale e se le spedizioni si effettuano con UPS, USPS, FedEx, Royal Mail, Australia Post o Canada Post. Se per le spedizioni si usano tariffe fisse o tariffe in base a tabelle personalizzate o se le spedizioni si fanno con altri corrieri, il numero di tracciabilità non porterà i clienti al sito del corriere. Tuttavia, è possibile modificare manualmente il modello di e-mail Ordine spedito per rendere cliccabili i numeri di spedizione, in modo che i clienti possano essere reindirizzati al sito del corriere per tenere traccia del proprio ordine.
Per aggiungere il link alla pagina di tracciabilità sul sito del corriere:
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Nella sezione Notifiche dell'ordine del cliente aprire il modello Ordine spedito.
- Nel testo del modello, trovare la parte del codice che inizia con "Order tracking number start" e finisce con "Order tracking number end". Solitamente, sono le righe 73-102 del codice:
- Sostituire il codice sopra riportato con il codice seguente, dove LINK_TO_CARRIERS_WEBSITE è il link reale del sito dove il cliente può monitorare il proprio ordine:
<!-- 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 --> - Premere Salva.
I clienti riceveranno un'e-mail con il link al sito del corriere utilizzato. Cliccando sul link, verranno reindirizzati al sito specificato nel modello di e-mail. Una volta sul sito, potranno immettere il proprio numero di tracciabilità riportato nell'e-mail Ordine spedito.
Aggiungere un blocco per ripetere l'ordine
La funzione Ordini ripetuti permette ai clienti di ordinare nuovamente gli stessi articoli cliccando sul pulsante "Acquista di nuovo" nell'e-mail di conferma ricevuto dopo aver inserito l'ordine originale. Se il modello Conferma d'ordine era stato personalizzato prima che la funzione Ordini ripetuti fosse diventata disponibile, è possibile aggiungere questo blocco manualmente.
Per aggiungere un blocco per ripetere l'ordine:
- Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
- Nella sezione Notifiche dell'ordine del cliente aprire il modello Conferma d'ordine.
- Trovare la riga <!-- block-related-products: end --> o individuare qualsiasi altra posizione in cui si desidera inserire il blocco e aggiungere il seguente pezzo di codice:
<!-- 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 --> - Premere Salva.
Ora, nelle notifiche di conferma dell'ordine i clienti vedranno il blocco per ripetere l'ordine: