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 mostra il numero di layout in essa contenuti. All’apertura viene visualizzata la scheda “Transazionale”; tutti i layout creati prima dell’introduzione delle tipologie di e-mail sono di tipo transazionale. I risultati della ricerca, l’ordinamento e la pagina corrente vengono mantenuti 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 la creazione del 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 nome con cui lo riconosce. È visibile solo a Lei.
• 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 relativi agli ordini e alle 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 di annullamento dell’iscrizione e i dati della Sua 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 formato HTML completamente personalizzata che inserite

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 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 large a H4 small), 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 della fase, 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, consultare 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 recensioni
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	Un'anteprima 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 dei contenuti
• 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 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 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 a disposizione.
• 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 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” crea una copia del 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 Shopify Flow (Shopify Flow) fa ancora riferimento a esso, il layout riporta l’indicatore “Usato 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 (Errore: layout 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 - 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.