Knowledge base
Guide
Accademia
Tutorial video
Prova a cercare:
Articoli visualizzati di recente:

Sommario

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.

Nel caso ci fosse bisogno di una personalizzazione più specifica, è possibile contattare il nostro team di personalizzazione per discutere di eventuali modifiche e ricevere un preventivo.
Disponibile con il piano: Venture, Business, Unlimited.

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:

  1. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  2. Nella sezione Notifiche dell'ordine del cliente, aprire il modello di e-mail che si desidera modificare.
  3. 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":

    Customizing_email_templates_with_HTML_code__1_.gif

Fatto. Ora, l'oggetto dell'e-mail apparirà come specificato:

Customizing_email_templates_with_HTML_code__10_.png

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:

  1. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  2. 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.
  3. Trovare la chiave del messaggio che contiene la formula iniziale: <@rosetta.message key="OrderConfirmation.customer_greeting" params={ "customerName": customer.name } /> :

    Customizing_email_templates_with_HTML_code__3_.png

  4. Sostituire interamente il testo di questa riga con il messaggio desiderato. Nel nostro esempio, il nuovo testo è Ciao ${customer.name},
  5. 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 } />
  6. 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.
  7. Salvare le modifiche.

Ora, nelle notifiche di conferma dell'ordine i clienti vedranno la formula iniziale personalizzata:

Customizing_email_templates_with_HTML_code__1_.png

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.

I markup grigi aiutano a orientarsi all'interno del modello.

Per aggiungere dei contenuti a un modello di e-mail:

  1. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  2. Fare clic su Modifica accanto al modello di e-mail che si desidera modificare.
  3. 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.
  4. 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>
  5. Sostituire la dicitura Inserire qui il testo desiderato con il proprio testo personalizzato. Ecco come dovrebbe apparire:

    Customizing_email_templates_with_HTML_code__6_.png

  6. 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:

Customizing_email_templates_with_HTML_code__8_.png

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:

  1. Caricare l'immagine su qualsiasi hosting di immagini. Ad esempio, ImgBB, Free Image Host o altri.
  2. Aprire l'immagine nel browser e copiarne l'indirizzo. Deve finire con .png, .jpeg o .img.
  3. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  4. Aprire il modello di e-mail che si desidera modificare.
  5. 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".
  6. 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.
  7. 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:

    Customizing_email_templates_with_HTML_code__5_.png

  8. Premere Salva.

Fatto. L'immagine apparirà nel modello di e-mail:

Customizing_email_templates_with_HTML_code__2_.png

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 sapere il codice di qualsiasi colore, è possibile usare il sito dei codici HTML dei colori.

Per cambiare il colore dei testi nelle e-mail:

  1. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  2. Fare clic su Modifica accanto al modello di e-mail che si desidera modificare.
  3. 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:

    Customizing_email_templates_with_HTML_code__4_.png

  4. Sostituire ${colorText} con il codice HTML del colore desiderato. Nel nostro esempio, è il codice #45B212 del colore verde:

    image3.png

  5. Premere Salva.

Ora la formula iniziale nel modello di e-mail è di colore verde:

Customizing_email_templates_with_HTML_code__9_.png

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:

  1. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  2. Nella sezione Notifiche dell'ordine del cliente aprire il modello Ordine spedito.
  3. 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:

    Customizing_email_templates_with_HTML_code__11_.png

  4. 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 -->
  5. 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:

  1. Nel pannello di controllo di Ecwid, andare a Impostazioni → Notifiche.
  2. Nella sezione Notifiche dell'ordine del cliente aprire il modello Conferma d'ordine.
  3. 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 -->
  4. Premere Salva.

Ora, nelle notifiche di conferma dell'ordine i clienti vedranno il blocco per ripetere l'ordine:

Repeat_order_button.png

Questo articolo ti è stato utile?

Fantastico! Grazie per il tuo feedback!

Grazie per il tuo feedback!

Ci dispiace molto! Cosa è andato storto?
Utenti che ritengono sia utile: 2 su 7
10
Utilizziamo i cookie e tecnologie simili per ricordare le tue preferenze, misurare l'efficacia delle nostre campagne e analizzare i dati non personalizzati per migliorare le prestazioni del nostro sito. Scegliendo "Accetta", acconsenti all'utilizzo dei cookie.
Accetta i cookie Rifiuta