Blocchi di contenuto: prodotto, sconto, conto alla rovescia, tracciamento e altro ancora

La versione 1.17 aggiunge tredici blocchi di contenuto e due blocchi di layout al visual builder. Ogni campo di testo al loro interno supporta Liquid, pertanto il titolo di un prodotto o un numero di tracciamento possono provenire dal workflow tramite {{ variables.xxx }}, e l’area di lavoro mostra ogni blocco visualizzato con le variabili di test.

Blocchi costituiti da componenti

La scheda del prodotto, il riquadro degli sconti, la testimonianza, la firma, il video e il blocco di tracciamento dell’ordine sono composti dai blocchi di base che già conoscete, proprio come il blocco “Immagine + Testo”. Apritene uno e il pannello delle impostazioni ne elencherà le parti: un’immagine, un titolo, un testo, un prezzo, un pulsante. Clicchi su una parte per modificarla utilizzando tutte le impostazioni di quel blocco (larghezza e allineamento dell’immagine, livello del titolo, formattazione del testo avanzato, stile del pulsante e raggio degli angoli); utilizzi l’icona a forma di occhio per nascondere una parte che non le serve. Sotto le parti si trovano le impostazioni del blocco stesso, come il layout della scheda o lo stile della cornice.

Prodotto

Una scheda prodotto. Componenti: immagine (da caricare o tramite un link, ad esempio {{ variables.product_image }}), titolo, descrizione (nascosta finché non la si attiva), prezzo con un prezzo di confronto opzionale visualizzato barrato e un pulsante. Il link racchiude l’immagine e il titolo; il pulsante dispone di un proprio link. Il layout posiziona l’immagine sopra il testo o accanto ad esso, specificando la larghezza dell’immagine e l’allineamento verticale della riga. Utilizzatelo per mettere in evidenza un prodotto in un’e-mail relativa a un ordine o volta a riconquistare un cliente.

Prezzo

Una riga dedicata al prezzo: il prezzo in grassetto, un prezzo di confronto facoltativo barrato che lo precede, taglia, colore e allineamento. Si tratta della sezione relativa al prezzo della scheda del prodotto, disponibile ovunque.

Griglia dei prodotti

Due o tre schede per riga da un elenco contenuto nelle vostre variabili, proprio come funziona la tabella degli articoli. Indirizzi List verso la variabile (ad esempio variables.products), quindi assegnate un nome alla proprietà che contiene ciascun campo: title, price, compare_at_price, image, url. Ogni voce diventa una scheda con un pulsante nello stile e con il raggio degli angoli da Lei scelti; un’immagine o un link mancante viene semplicemente omesso. Compili l’elenco da Shopify Flow utilizzando un passo «Esegui codice» o gli articoli dell’ordine.

Codice sconto

Un riquadro di codice composto da un’intestazione, una descrizione e un pulsante, racchiuso in una cornice tratteggiata, continua o semplice. Due modi per compilarlo:

  • Un codice già esistente: digiti il codice (o una variabile). Il pulsante rimanda al Suo negozio con il codice applicato al momento della checkout, a meno che non le assegni un link specifico.
  • Creare un codice univoco per ogni e-mail: l’app genera un codice sconto monouso nel Suo negozio al momento dell’invio dell’e-mail, denominato PREFIX-XXXXXX, con la percentuale o l’importo, la validità in giorni, il subtotale minimo e la regola “una volta per cliente” da Lei impostata. Il codice compare nella Cronologia insieme all’invio, e la funzione “Reinvia” dell’e-mail mostra lo stesso codice. Un’e-mail di marketing genera un codice per ciascun destinatario.

La creazione dei codici richiede l'autorizzazione "Sconti", che il blocco richiede direttamente e che potete revocare nella pagina "Autorizzazioni" (Autorizzazioni: quali dati l’app può leggere dal vostro negozio). L'app si limita a creare codici; non legge, modifica né elimina mai altri sconti. Un'e-mail di prova mostra un segnaposto anziché generare un codice.

Conto alla rovescia

Un conto alla rovescia in tempo reale per una data e un’ora. Nell’e-mail si tratta di un’immagine animata che l’app visualizza all’apertura del messaggio, pertanto il conto alla rovescia è visibile direttamente nella posta in arrivo; un client che blocca le immagini mostra il testo accanto ad essa. Il campo “Ends at” accetta una data con fuso orario (2026-12-24T23:59:00+01:00) o una variabile. Quattro stili: riquadri, schede ribaltabili, minimalista e testo; tre dimensioni; etichette e colori personalizzabili; e un testo che sostituisce il conto alla rovescia una volta trascorso il tempo.

Tracciamento dell'ordine

Corrieri e numero di tracciamento, una barra di avanzamento e due elementi: un pulsante “Traccia” (che apre il link di tracciamento a meno che non ne venga specificato un altro) e una nota, ad esempio la data di consegna prevista, nascosta finché non ne avete bisogno. Lo stato della spedizione rileva lo stato di Shopify da Shopify Flow (IN_TRANSIT, OUT_FOR_DELIVERY, DELIVERED e gli altri) oppure un numero di fase, ed evidenzia le fasi che lo precedono. Le etichette delle fasi sono a vostra scelta; da due a sei.

Valutazione a stelle

Stelle corrispondenti a un numero ({{ variables.rating }}), arrotondate al numero intero di stelle, con le altre in grigio, un testo accanto ad esse e un link facoltativo, ad esempio alla vostra pagina delle recensioni. Da abbinare a un'e-mail di richiesta di recensione.

Testimonianza

Una citazione e una frase dell’autore come elementi testuali, più una foto facoltativa, sotto forma di biglietto, con una barra colorata di risalto oppure in versione semplice.

Collegamenti ai social network

Una serie di icone dei social network (Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest e altre), con dimensioni e spaziatura. Le stesse icone utilizzate nel piè di pagina.

Video

Le e-mail non supportano la riproduzione dei video, pertanto questo blocco mostra la miniatura con un pulsante di riproduzione, collegato alla pagina del video, e una didascalia facoltativa sottostante. È possibile scegliere tra un pulsante di riproduzione scuro, chiaro o nei colori del marchio, nonché l’altezza e la larghezza della miniatura. Outlook per Windows non mostra la miniatura dietro il pulsante di riproduzione; il collegamento rimane comunque funzionante.

Firma

Una foto, un nome (un titolo) e i dettagli (un testo: qualifica, azienda, numero di telefono, e-mail, sito web), con la foto di forma rotonda o quadrata, posizionata a sinistra o in alto. Le impostazioni predefinite utilizzano {{ shop.name }} e {{ shop.email }}.

Tabella

Una piccola tabella di dati relativa ai dettagli degli ordini o alle specifiche. Ogni cella contiene una variabile; la prima riga può fungere da intestazione e le righe possono essere alternate.

Visualizza nel browser

La consueta frase “Visualizza questa e-mail nel browser”. Il link apre una versione web di quella stessa e-mail, generata in base al layout e ai dati del messaggio inviato, disponibile per 30 giorni. Un’e-mail di prova rimanda al layout con le relative variabili di test.

Rubriche

Due, tre o quattro colonne di uguale larghezza, ciascuna con i propri blocchi: tre schede di prodotto affiancate, oppure icone con una riga di testo sotto ciascuna di esse.

Mostrare se

Una sezione che viene inviata solo quando una condizione relativa alle vostre variabili risulta vera. Digitate la condizione nel formato previsto da Liquid: variables.total > 100, language == "de", variables.tags contains "vip". La tela la valuta utilizzando le vostre variabili di prova e oscura la sezione qualora questa dovesse essere omessa. Inserite i blocchi al suo interno come fareste in una colonna.

Correlati