Creare un layout per un’e-mail
Il layout di un’e**-mail** è costituito dall’e-mail stessa: l’oggetto, il design e gli eventuali allegati. L’azione Shopify Flow seleziona un layout e un mittente, quindi invia il messaggio. Poiché il layout è separato dal workflow, un unico design può essere utilizzato per tutti i clienti senza che Lei debba intervenire nuovamente sul codice HTML.
L'elenco presenta due schede, “Transazionale” e “Marketing”, ciascuna delle quali indica il numero di layout in essa contenuti. All’apertura viene visualizzata la scheda “Transazionale”; tutti i layout creati prima dell’introduzione delle tipologie di email sono di tipo transazionale. Le impostazioni di ricerca, ordinamento e pagina vengono mantenute quando si passa da una scheda all’altra. Un layout di marketing presenta un’icona “Marketing” accanto al proprio nome, e la funzione “Crea layout e-mail” nella scheda “Marketing” avvia il nuovo layout come layout di marketing.
Creare un layout
Vada alla sezione "Modelli di email" e faccia clic su "Crea modello di email". Dovrà impostare:
- Nome: il modo in cui lo riconosce. Solo lei può vederlo.
- Oggetto: fornisce assistenza per
{{ variables.xxx }}e{{ secrets.xxx }}. - Testo di anteprima - facoltativo. Si tratta della breve riga che la maggior parte delle caselle di posta visualizza accanto all’oggetto. Si consiglia di utilizzare 40-100 caratteri; supporta le stesse variabili dell’oggetto. Se lo si lascia vuoto, il client di posta selezionerà invece il primo testo presente nell’e-mail.
- Descrizione - facoltativa, a titolo di riferimento.
- Tipo di email - Transazionale: per le email che i clienti si aspettano, come gli aggiornamenti sugli ordini e sulle spedizioni; vengono sempre inviate, anche ai clienti che si sono disiscritti dalle comunicazioni di marketing. Marketing: per newsletter, promozioni ed e-mail di riconquista; ogni destinatario riceve la propria e-mail con un link per annullare l’iscrizione e i dati dell’azienda riportati nelle Impostazioni, mentre i clienti che si sono disiscritti vengono esclusi. A differenza dell’editor, il tipo può essere modificato in un secondo momento nell’editor di layout. Maggiori dettagli su E-mail di marketing e cancellazioni dall’iscrizione.
Scelga quindi un editor:
| Redattore | Ideale per |
|---|---|
| Generatore visivo | E-mail personalizzate e con il marchio dell’azienda, realizzate utilizzando blocchi “drag-and-drop” |
| Testo formattato / HTML | Semplici note transazionali oppure un’e-mail in HTML completamente personalizzata da incollare |
Il generatore visivo
Il generatore è costituito da una schermata a due pannelli: le impostazioni a sinistra e un’anteprima in tempo reale dell’area di lavoro a destra. È possibile aggiungere blocchi tramite il pulsante “Aggiungi sezione” oppure utilizzando i simboli “+” tra i blocchi esistenti.
Il pannello di sinistra presenta quattro schede:
| Scheda | Cosa contiene |
|---|---|
| Informazioni generali | Nome, Oggetto, Testo di anteprima, Descrizione |
| Branding | Colori, tipografia e spaziatura nella impaginazione dell’intera e-mail |
| Blocchi | Impostazioni relative al blocco che avete selezionato sull'area di lavoro |
| Variabili di prova | Il frammento JSON relativo a Shopify Flow, il riferimento alle variabili di sistema e i valori di esempio per l’anteprima |
Ogni blocco sulla tela dispone di comandi che consentono di trascinarlo, duplicarlo, eliminarlo o nasconderlo senza eliminarlo.
Riferimento al blocco
Elementi
| Blocco | Impostazioni |
|---|---|
| Testo | Testo formattato, allineamento, dimensione del carattere (12/14/16/18), colore |
| Titolo | Testo dell'intestazione, dimensione (da H1 extra grande a H4 piccolo), allineamento, colore |
| Immagine | Immagine (caricamento o link), testo alternativo, larghezza 10-100%, allineamento |
| Pulsante | Etichetta, URL, stile (Primario / Secondario / Schema), allineamento, raggio del bordo 0-24px |
| Separatore | Colore, stile (continuo / tratteggiato / punteggiato), spessore 1-8 |
| Spaziatura | Altezza 4-80px |
| Allegato | Selettore di file e titolo. Si veda Allegati e immagini |
| Ciclo | Ripete un blocco di Liquid + HTML su una variabile array: utilizzatelo per gli articoli |
| HTML / Codice | HTML grezzo con Liquid, comprese le condizioni {% if %} |
| Codice QR | Dati (URL o testo, supporta variabili), dimensione 80-300 px, allineamento |
Impaginazione
| Blocco | Impostazioni |
|---|---|
| Immagine + Testo | Posizione dell’immagine (sinistra/destra), larghezza dell’immagine 20-70%, allineamento verticale, spazio, colore di sfondo, oltre ai sottocomponenti immagine / testo / pulsante |
| Due colonne | Divisione delle colonne (50/50, 33/67, 67/33, 40/60, 60/40), spazio tra le colonne 0-40, allineamento verticale, riempimento e contenuti separati per le colonne sinistra e destra |
Branding
La scheda "Branding" si applica all'intero layout:
- Colori: primari, secondari, del testo, dello sfondo del corpo del testo, dello sfondo del contenuto
- Tipografia - carattere dei titoli, carattere del corpo del testo, interlinea
- Layout - i controlli di spaziatura riportati di seguito
| Controllo | Cosa cambia | Gamma |
|---|---|---|
| Larghezza massima | Di quanto può aumentare la lunghezza del contenuto dell’e-mail | 400-800 px |
| Imbottitura per contenitori | Spazio attorno all'intera area dei contenuti | 0-40px |
| Imbottitura dei blocchi (lati) | Spazio tra il contenuto e i bordi sinistro e destro | 0-40px |
| Riempimento dei blocchi (in alto e in basso) | Spazio sopra e sotto il contenuto di ciascun blocco | 0-40px |
| Spaziatura tra i blocchi | Distanza verticale tra un blocco e quello successivo | 0-40px |
Si raccomanda di mantenere ridotte le impostazioni di “Riempimento blocco” (in alto e in basso). Poiché la funzione “Spaziatura tra i blocchi” separa già i blocchi, aumentare entrambi i valori comporta la creazione di ampi spazi vuoti.
Se ha assegnato un nome ai colori del marchio nella sezione Impostazioni > Marchio e caratteri, ogni selettore di colore nel builder li visualizza sotto forma di campioni sotto il campo; cliccando su un campione si applica quel colore. Il campione del colore attualmente selezionato nel campo è evidenziato. Veda Impostazioni.
Il menu a tendina dei caratteri offre i caratteri di sistema (Arial, Georgia, Verdana, Times New Roman, Helvetica, Trebuchet MS), una serie di caratteri Google (Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Playfair Display, Merriweather, Source Sans 3, Oswald, Work Sans, DM Sans, Space Grotesk), nonché qualsiasi carattere personalizzato da Lei caricato nella sezione Impostazioni > Marchio e caratteri.
Intestazione e piè di pagina
L’intestazione e il piè di pagina sono aree cliccabili situate rispettivamente nella parte superiore e inferiore dell’area di lavoro. Per ciascuna di esse è possibile utilizzare un’impostazione predefinita salvata, in modo che qualsiasi modifica al proprio marchio si rifletta immediatamente su tutti i layout, oppure l’opzione “Personalizzato” (solo per questo layout) per un’impostazione una tantum. Si veda Impostazioni predefinite per intestazioni e piè di pagina.
Modalità testo formattato / HTML
In questa modalità, il corpo del testo è costituito da un unico editor dotato di un pulsante per passare da Rich Text a HTML e di un pulsante separato per l'anteprima.
- La modalità "Rich Text" mette a vostra disposizione una barra degli strumenti di formattazione che vi risulterà familiare.
- L'HTML mette a disposizione un'area di testo non formattata: incolli qui un'e-mail già completamente impaginata, se ne avete una.
- La funzione "Inserisci immagine" consente di aggiungere un'immagine ospitata, proveniente dalla propria libreria multimediale o da un link.
L'anteprima è di sola lettura e mostra i tag Liquid così come sono. Per visualizzare i valori effettivi, inviate un'e-mail di prova.
Collegarlo a Shopify Flow
Il layout rappresenta solo metà del lavoro: Shopify Flow deve fornire i valori per i Suoi segnaposto.
Ogni layout dispone di una scheda "Utilizza Shopify Flow" contenente le variabili esatte (in formato JSON) da incollare nell'azione "Invia email transazionale", con tutti i nomi delle chiavi già corretti. La copi, la incolli in Shopify Flow e sostituisca eventuali segnaposto <pick a Flow variable>.
Guida completa: Trasmissione dei dati da Shopify Flow.
Anteprima con variabili di prova
La scheda "Variabili di test" elenca tutte le variabili {{ variables.x }} rilevate dall'app, in modo da poter inserire valori di esempio e verificare che il progetto venga visualizzato correttamente.
Per inserire un array in un blocco "Loop", lo inserisca come array JSON in questa scheda.
Inviare un’e-mail di prova
Utilizzi la funzione “Invia email di prova” nell’editor di layout. Tale funzione visualizza il layout così come apparirà effettivamente e lo invia tramite un mittente da Lei scelto, con l’oggetto preceduto dal prefisso [TEST]. Questo è l’unico modo per verificare che il Suo codice Liquid venga effettivamente risolto, poiché l’anteprima nella pagina non lo valuta.
Dopo la messa in produzione, controlli la sezione “Cronologia”: un invio in cui un segnaposto non ha prodotto alcun risultato viene contrassegnato come “Variabili vuote”. Si veda Cronologia e risoluzione dei problemi.
Riutilizzare un progetto
- Altro → L’opzione “Salva come modello” consente di salvare il progetto in modo da poterlo riutilizzare in futuro. I progetti salvati sono disponibili nella sezione “I miei modelli”, che contiene esclusivamente i progetti da Lei salvati.
- Altro → L'opzione "Duplica" copia il layout nella posizione corrente.
- Altro → La funzione “Esporta” consente di scaricare il file, mentre la funzione “Importa” nella pagina dell’elenco accetta file in formato
.zipo.jsonprecedentemente esportati dall’app: una funzione utile per trasferire un progetto da un negozio all’altro.
Eliminazione di un layout
È sempre possibile eliminare un layout. Se un passaggio Shopify Flow fa ancora riferimento a esso, il layout riporta l’indicatore “Utilizzato in Shopify Flow” e la finestra di conferma dell’eliminazione lo segnala, ma ciò non impedisce di procedere.
Dopo l’eliminazione, qualsiasi fase di Shopify Flow che continui a fare riferimento a tale elemento genera un errore del tipo Email template not found, che viene registrato nella cronologia. Per risolvere il problema, si consiglia di reindirizzare tali fasi verso un layout diverso.
Correlati
- Trasmissione dei dati da Shopify Flow - l'inserimento dei valori.
- Variabili e liquidi - il riferimento completo alla variabile.
- Allegati e immagini - file, immagini e limiti di dimensione.
- Impostazioni predefinite per intestazioni e piè di pagina - branding riutilizzabile.
- E-mail di marketing e cancellazioni dall’iscrizione - in che modo un layout di marketing si distingue dagli altri.
- Impostazioni - i colori del marchio, i caratteri personalizzati e le impostazioni predefinite per le e-mail relative all’intero negozio.