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 di Shopify Flow seleziona un layout e un mittente, quindi provvede all’invio. 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 mostra il numero di layout in essa contenuti. All’apertura, viene visualizzata la scheda Transazionale; tutti i layout creati prima dell’introduzione dei tipi di email sono di tipo transazionale. Le impostazioni di ricerca, ordinamento e paginazione vengono mantenute quando si passa da una scheda all’altra. Un layout di marketing è contrassegnato da un’icona Marketing accanto al nome, e selezionando Crea layout e-mail nella scheda “Marketing” si avvia la creazione di un nuovo layout come layout di marketing.

Creare un layout

Vada alla sezione Layout delle e-mail e faccia clic su Crea layout e-mail. 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 mostra 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 personale.
• 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 in 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 + situati 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 del layout per l’intera e-mail
Blocchi	Impostazioni relative al blocco che avete selezionato sull'area di lavoro
Variabili di prova	Il frammento di codice JSON di 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	Un selettore di file, un link o un metacampo relativo all’ordine o al cliente del passaggio, nonché un titolo. Si veda Allegati e immagini
Ciclo	Ripete un blocco di Liquid + HTML su una variabile di tipo array
HTML / Codice	HTML grezzo con Liquid, comprese le condizioni {% if %}
Codice QR	Dati (URL o testo, supporta variabili), dimensione 80-300 px, allineamento
Tabella degli articoli	Gli articoli dell'ordine provenienti da una variabile di elenco, con righe relative a immagine, quantità, prezzo e totali

Blocchi relativi al commercio e ai contenuti (novità della versione 1.17; per informazioni dettagliate su ciascuno di essi, si veda Blocchi di contenuto: prodotto, sconto, conto alla rovescia, tracciamento e altro ancora)

Blocco	Cosa fa
Prodotto	Una scheda prodotto: immagine, titolo, descrizione, prezzo con prezzo di confronto e un pulsante. Ogni campo accetta una variabile
Griglia dei prodotti	Due o tre schede per riga da una variabile di elenco, come la tabella degli articoli
Codice sconto	Un campo per il codice con un pulsante che consente di applicare il codice al momento dell’checkout. Può trattarsi di un codice digitato dall’utente oppure di un codice univoco monouso generato dal Suo negozio per ogni indirizzo e-mail
Conto alla rovescia	Un conto alla rovescia in tempo reale verso una data, visualizzato sotto forma di immagine animata all’apertura dell’e-mail. Riquadri, schede ribaltabili, stile minimalista o testuale
Tracciamento dell'ordine	Vettore, numero di tracciamento, un pulsante “Traccia” e una barra di avanzamento che varia in base allo stato della spedizione
Valutazione a stelle	Stelle corrispondenti a un numero, con un'etichetta e un link facoltativo alla Sua pagina di recensione
Testimonianza	Una citazione con nome, ruolo e foto, sotto forma di biglietto, con una barra di accento o senza alcuna decorazione
Collegamenti ai social network	Una serie di icone di rete
Video	Una miniatura con un pulsante di riproduzione che rimanda al video
Firma	Nome, titolo, azienda, numero di telefono, indirizzo e-mail, sito web e una foto
Tabella	Una piccola tabella di dati, in cui ogni cella contiene una variabile
Visualizza nel browser	La consueta frase “Visualizza questa e-mail nel browser”
Prezzo	Una riga dedicata al prezzo: il prezzo, un prezzo di confronto facoltativo barrato, la taglia, il colore e l’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 di sinistra e di destra
Rubriche	Due, tre o quattro colonne uguali, ciascuna con i propri blocchi
Mostrare se	Una sezione che viene inviata solo quando una condizione relativa alle variabili risulta vera, ad esempio variables.total > 100 o language == "de"

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). La funzione Spaziatura tra i blocchi separa già i blocchi, pertanto aumentando entrambi i valori si creano 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 visualizzerà sotto forma di campioni sotto il campo; cliccando su un campione, verrà applicato quel colore. Il campione corrispondente al 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 che avete caricato nella sezione Impostazioni > Marchio e caratteri.

Intestazione e piè di pagina

L'intestazione e il piè di pagina sono aree cliccabili situate 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 aggiorni contemporaneamente 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 a voi familiare.
• L'HTML mette a disposizione un'area di testo non formattata: incolli qui un'e-mail già completamente formattata, 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, invii 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 in Shopify Flow” contenente le variabili esatte (in formato JSON) da incollare nell’azione Send Transactional Email, con tutti i nomi delle chiavi già corretti. La copi, la incolli in Shopify Flow e sostituisca eventuali segnaposto del tipo <pick a Flow variable>.

Potete scegliere il layout per ogni fase di Shopify Flow nella pagina di configurazione dell’azione, che ne mostra un’anteprima compilata con le variabili di test. Nomi chiari e variabili di test realistiche consentono di individuare facilmente il layout corretto in tale schermata.

Guida completa: Trasmissione dei dati da Shopify Flow.

Anteprima con variabili di prova

La scheda Variabili di test elenca tutte le {{ variables.x }} individuate dall'app, in modo da poter inserire valori di esempio e verificare che il design 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. Questa 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 elaborato, poiché l’anteprima nella pagina non lo valuta.

Dopo la pubblicazione, controlli la sezione Cronologia: un invio in cui un segnaposto non ha prodotto alcun risultato viene contrassegnato come Variabili vuote. 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 .zip o .json precedentemente 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 di Shopify Flow fa ancora riferimento a esso, il layout riporta il badge 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 modello genera un errore con il messaggio Email template not found (Modello di email non trovato), che viene registrato nella Cronologia. Per risolvere il problema, si prega di reindirizzare tali fasi verso un layout diverso.

Correlati

• Blocchi di contenuto: prodotto, sconto, conto alla rovescia, tracciamento e altro ancora: prodotto, sconto, conto alla rovescia, tracciamento e gli altri blocchi di contenuto.
• Trasmissione dei dati da Shopify Flow - inserimento dei valori.
• Variabili e liquidi: la guida completa alle variabili.
• 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: colori del marchio, caratteri personalizzati e impostazioni predefinite per le e-mail relative all'intero negozio.