Passa al contenuto principale

Generatore di Visualizzazione: Progetta il Tuo Widget della Data di Consegna

Il Generatore di Visualizzazione è il luogo in cui decidi esattamente come le informazioni sulla consegna appaiono ai tuoi clienti. Da un conto alla rovescia in grande evidenza a una semplice riga con la data — controlli l'aspetto, lo stile e il contenuto di ogni widget che compare nelle pagine prodotto e nel carrello.

Ciò che rende questa sezione particolarmente potente è l'Anteprima Live: man mano che modifichi qualsiasi impostazione, l'anteprima in cima alla pagina si aggiorna in tempo reale. Vedi subito il risultato, senza salvare né ricaricare la pagina. Puoi sperimentare liberamente finché il widget non ha esattamente l'aspetto giusto per il tuo negozio.

Per aprire il Generatore di Visualizzazione, vai su Back Office → Moduli → Estimated Delivery → Design.

L'anteprima live della scheda Design e il selettore dello stile di visualizzazione

Iniziare con l'Anteprima Live​

L'Anteprima Live si trova in cima alla scheda Design e funziona come la tua area di lavoro. Mostra una simulazione realistica del widget così come apparirà nel tuo negozio, con le impostazioni correnti.

Ogni modifica apportata nella barra laterale sinistra — stile di visualizzazione, colori, bordo, icona, formato del testo — viene riflessa nell'anteprima nel momento in cui la applichi. Non è necessario salvare per vedere il risultato.

Questo rende il Generatore di Visualizzazione ideale per iterare rapidamente. Potresti iniziare con un preset vicino a quello che desideri, poi regolare il colore del bordo, modificare la spaziatura e osservare l'anteprima adattarsi esattamente allo stile di cui ha bisogno il tuo negozio. Quando sei soddisfatto di ciò che vedi, clicca Salva per applicare la configurazione.

Scegliere uno Stile di Visualizzazione​

Il selettore dello stile di visualizzazione è la decisione più importante che prenderai in questa sezione. Determina quali informazioni vengono mostrate nel widget e come queste informazioni sono strutturate. Ci sono sei modalità tra cui scegliere.

Tutti i Corrieri​

Questa modalità elenca ogni corriere disponibile per il prodotto corrente, ciascuno con la propria data di consegna stimata. I clienti possono vedere a colpo d'occhio quali corrieri sono più veloci e quanto costa ciascuna opzione.

È la scelta giusta quando offri più metodi di spedizione e vuoi dare ai clienti piena trasparenza. Funziona particolarmente bene per i negozi in cui la velocità di spedizione è un fattore decisivo — elettronica, regali, ordini dell'ultimo minuto.

Conto alla Rovescia​

La modalità Conto alla Rovescia mostra un timer che conta alla rovescia fino all'orario di chiusura degli ordini — il punto oltre il quale gli ordini piazzati oggi verranno spediti domani invece.

Questo crea un naturale senso di urgenza senza ricorrere a espedienti. Quando un cliente vede "Ordina entro 2h 14m per la consegna entro giovedì", capisce esattamente cosa è in gioco. Usa questa modalità quando hai un orario limite giornaliero chiaramente definito e vuoi incoraggiare decisioni più rapide.

Limite di Preparazione​

Simile al Conto alla Rovescia, ma invece di mostrare la scadenza per la spedizione, questa modalità dice ai clienti quando il loro ordine sarà prelevato e preparato in magazzino. È più orientata all'interno — utile se il tuo magazzino ha una programmazione delle operazioni che influisce sui tempi di consegna e vuoi essere trasparente al riguardo.

Giorno di Spedizione​

Questa modalità mostra il giorno specifico in cui si prevede che l'ordine venga spedito, piuttosto che la data di consegna. È adatta ai negozi dove i clienti si preoccupano più di quando il pacco lascia il magazzino — ad esempio, quando devono coordinare con un cantiere edile o un luogo di consegna.

Doppia Visualizzazione​

La Doppia Visualizzazione mostra due righe di informazioni di consegna affiancate. Ciò è utile quando vuoi evidenziare, ad esempio, sia la data di consegna prevista che il corriere di spedizione, oppure visualizzare prominentemente due diversi corrieri.

Personalizzato​

La modalità Personalizzato ti dà il pieno controllo sul messaggio del widget, permettendoti di scrivere il tuo template usando segnaposto. Puoi comporre qualsiasi messaggio che combina nomi di corrieri, date, prezzi e condizioni contestuali.

Questa è l'opzione più flessibile e quella a cui ricorrere quando le modalità integrate non dicono esattamente quello che hai bisogno. Ad esempio: "Consegna gratuita con DHL — arriva entro il {date}", oppure un messaggio che cambia in base alla disponibilità del prodotto.

Per una spiegazione completa su come scrivere template personalizzati, consulta la guida Modelli di Messaggio.

Avvio Rapido: Preset di Design​

Se non sai da dove iniziare visivamente, la sezione Aspetto offre 22 preset di design in un solo clic. Ogni preset applica una configurazione visiva completa — bordo, stile degli angoli, ombra, spaziatura, colore di sfondo — con un singolo clic.

Preset di design nella sezione Aspetto

I preset disponibili sono:

Modern Card · Classic · Bold Green · Minimal · Subtle · Airy · Floating · Elegant · Fresh · Compact Pro · Pill Badge · Dashed · Warm · Left Accent · Top Bar · Urgent · Highlight · Statement · Double Line · Outlined · Dark Mode · Navy Accent

L'Anteprima Live si aggiorna nel momento in cui clicchi su un preset, così puoi scorrerli rapidamente e vedere quale si avvicina di più allo stile del tuo negozio. Una volta trovato un buon punto di partenza, puoi sovrascrivere le singole impostazioni — colori, angoli, spaziatura — senza toccare il resto.

Una nota sui preset e i colori personalizzati: selezionare un preset sovrascrive tutte le impostazioni di aspetto, inclusi eventuali colori personalizzati che hai inserito. Se vuoi usare un preset come base ma mantenere i colori del tuo brand, applica prima il preset, poi inserisci i tuoi valori di colore personalizzati.

Personalizzare l'Aspetto​

Una volta scelto un preset (o se preferisci costruire da zero), la sezione Aspetto ti permette di perfezionare ogni dettaglio visivo.

Bordo​

Il bordo dà al widget un contorno definito che lo aiuta a distinguersi dal resto della pagina prodotto. Puoi scegliere lo stile del bordo (Nessuno, Semplice, Tratteggiato o Doppio), il suo spessore (Sottile, Normale o Spesso) e su quali lati appare (Tutti i lati, Solo sinistra, Solo sopra o Sopra e sotto).

Un bordo solo a sinistra è una scelta popolare — dà al widget un sottile risalto che sembra moderno e non domina la pagina. Un bordo tratteggiato può aggiungere un aspetto più morbido e informale.

Angoli​

L'arrotondamento degli angoli controlla quanto appaiono spigolosi o morbidi i bordi del widget. Gli angoli netti sembrano strutturati e precisi. Gli angoli morbidi sono più amichevoli. Gli angoli arrotondati danno un aspetto simile a una scheda. Gli angoli a pillola fanno sembrare il widget un badge — accattivante e compatto.

Adatta questo all'estetica generale del tuo tema. Se i tuoi pulsanti e le schede prodotto hanno angoli arrotondati, far corrispondere il widget crea coesione visiva.

Ombra​

Un'ombra solleva leggermente il widget dalla pagina, dandogli una profondità simile a una scheda. Nessuna lo mantiene piatto. Leggera aggiunge la minima suggestione di profondità. Elevata dà un effetto chiaramente rialzato. Fluttuante crea una forte ombra proiettata che fa risaltare il widget.

Usa le ombre con parsimonia — funzionano meglio quando il resto della tua pagina prodotto è relativamente piatta.

Spaziatura e Dimensione del Testo​

La spaziatura controlla il padding interno del widget. Stretta (4px / 8px) è adatta per layout di pagina compatti. Comoda (8px / 14px) si adatta alla maggior parte dei negozi. Spaziosa (14px / 20px) dà respiro al widget e lo fa sembrare premium.

La dimensione del testo è separata: Piccola (12px) per design minimali, Media (14px) come impostazione predefinita, Grande (16px) quando vuoi che la data di consegna sia l'elemento più prominente nella pagina prodotto.

Margine​

Il margine controlla lo spazio tra il widget e gli elementi circostanti — tipicamente il pulsante Aggiungi al Carrello e la descrizione del prodotto. Normale (10px sopra e sotto) è un valore predefinito affidabile. Ampio (20px) dà al widget più prominenza. Nessuno (0) rimuove completamente lo spazio, utile quando il tuo tema gestisce già la spaziatura.

Colori e Formattazione del Testo​

La sezione Colori e Formato ti permette di impostare un colore personalizzato e uno stile di testo per ciascuno dei quattro elementi che possono apparire nel widget.

Sezione Colori e Formato

I quattro elementi sono:

  • Date di consegna — la data o l'intervallo di date di arrivo stimato
  • Timer del conto alla rovescia — il conto alla rovescia mostrato nella modalità Conto alla Rovescia
  • Nome del corriere — il nome del corriere di spedizione
  • Prezzo del corriere — il costo di spedizione associato al corriere

Per ciascun elemento, puoi impostare:

Colore — un valore di colore esadecimale. Questo sostituisce il colore del testo predefinito del widget solo per quell'elemento. Utile per attirare l'attenzione sulla data di consegna (il tuo messaggio principale) mantenendo il nome e il prezzo del corriere in un tono più neutro.

Formattazione del testo — Grassetto, Corsivo e Sottolineato, in qualsiasi combinazione. Queste opzioni usano internamente una bitmask: Grassetto = 1, Corsivo = 2, Sottolineato = 4. In pratica, le imposti tramite caselle di controllo nell'interfaccia — i numeri sono solo il modo in cui il modulo memorizza le tue scelte in background. Puoi combinarle liberamente: Grassetto + Corsivo dà alla data un forte risalto, ad esempio.

Un approccio comune è rendere il testo della data di consegna in Grassetto e dargli il colore di accento del tuo brand, lasciando il nome del corriere nello stile predefinito. Questo attira l'attenzione del cliente sull'informazione più importante per prima.

Posizionamento​

La sezione Posizionamento controlla dove appare il widget nella pagina prodotto. Le opzioni includono tipicamente sopra il pulsante Aggiungi al Carrello, sotto di esso, oppure in una posizione hook specifica definita dal tuo tema.

Scegli il posizionamento in base al flusso di lettura naturale dei tuoi clienti. La maggior parte dei negozi trova che posizionare il widget direttamente sopra o sotto il pulsante Aggiungi al Carrello funzioni meglio — appare nel momento in cui il cliente sta decidendo se acquistare, che è esattamente quando le informazioni sulla consegna sono più persuasive.

CSS Personalizzato​

Il campo CSS Personalizzato in fondo alla barra laterale è per gli utenti avanzati che necessitano di un controllo oltre a quello fornito dalle impostazioni visive. Tutto ciò che inserisci qui viene iniettato nella pagina insieme al widget, con scope al contenitore del widget.

Puoi usarlo per applicare stili che corrispondano a temi altamente personalizzati, adattare il widget per breakpoint specifici, o sovrascrivere un dettaglio di un preset che non ha un'impostazione dedicata.

Se hai dimestichezza con i CSS, questo campo ti offre piena libertà. Se no, le impostazioni visive da sole copriranno le esigenze della grande maggioranza dei negozi.

Consigli per un Aspetto Professionale​

Ottenere un widget che sembri nativo del tuo negozio — piuttosto che aggiunto in modo posticcio — si riduce a poche scelte coerenti.

Abbina lo stile degli angoli del tuo tema. Se i tuoi pulsanti hanno angoli arrotondati, dai anche al widget angoli arrotondati. La coerenza nella forma crea un linguaggio di design coerente in tutta la pagina.

Usa il colore di accento del tuo brand per la data. La data di consegna è il dato più importante nel widget. Impostarla sul colore primario o di accento del tuo negozio la fa sembrare intenzionale anziché generica.

Mantieni la spaziatura generosa. Un widget stipato sembra un ripensamento. Una spaziatura Comoda o Spaziosa, combinata con un margine Normale o Ampio, dà al widget spazio per respirare e lo fa sembrare una parte propria della pagina.

Inizia con un preset, poi regola. Anche se nessuno dei preset è perfetto, tutti forniscono una solida base visiva. È più veloce iniziare da Minimal o Subtle e cambiare una o due cose piuttosto che costruire da zero.

Visualizza l'anteprima su un prodotto reale. L'Anteprima Live mostra il widget in isolamento. Una volta soddisfatto, controlla una pagina prodotto reale nel tuo negozio per vedere come si posiziona accanto alle immagini del prodotto, alla descrizione e ai pulsanti.

Domande Frequenti​

L'Anteprima Live non si aggiorna quando modifico le impostazioni. Cosa devo fare?

Prova a ricaricare la pagina della scheda Design. Se l'anteprima ancora non si aggiorna, verifica che JavaScript sia abilitato nel tuo browser e che nessuna estensione del browser stia bloccando gli script nelle pagine del Back Office. L'Anteprima Live si basa su un piccolo listener JavaScript che monitora le modifiche alle impostazioni.

Ho applicato un preset e ora i miei colori personalizzati sono scomparsi. Posso recuperarli?

I preset sovrascrivono tutte le impostazioni di aspetto, inclusi i colori personalizzati. Se hai applicato un preset per errore, puoi reinserire i tuoi valori di colore nella sezione Colori e Formato senza dover ripristinare l'intero preset. In futuro, applica sempre prima il preset, poi imposta i tuoi colori personalizzati.

Posso mostrare uno stile di widget diverso nella pagina del carrello rispetto alla pagina prodotto?

Il Generatore di Visualizzazione applica una configurazione globale unica che copre tutti i posizionamenti — pagina prodotto, pagina carrello e qualsiasi altra posizione in cui appare il widget. Se hai bisogno di contenuti significativamente diversi per tipo di pagina, lo stile di visualizzazione Personalizzato con i modelli di messaggio ti offre la massima flessibilità attraverso blocchi condizionali.

Cosa significa il numero bitmask nella sezione Colori e Formato?

La bitmask è semplicemente il modo in cui il modulo memorizza le tue scelte di formattazione del testo in background. Non hai bisogno di digitare numeri — l'interfaccia mostra caselle di controllo per Grassetto, Corsivo e Sottolineato. Quando selezioni più caselle, il modulo somma i loro valori (Grassetto = 1, Corsivo = 2, Sottolineato = 4). Ad esempio, Grassetto + Corsivo viene memorizzato come 3. Questo è rilevante solo se stai leggendo file di esportazione della configurazione o impostando valori tramite l'API.

Il Generatore di Visualizzazione influisce su come appaiono le date di consegna nelle email di conferma dell'ordine?

No. Il Generatore di Visualizzazione controlla solo il widget del front-office nelle pagine prodotto e nel carrello. La formattazione delle date di consegna nelle email viene configurata separatamente tramite le impostazioni Variabili Email.

Posso impostare stili di widget diversi per corriere?

Il Generatore di Visualizzazione applica un unico stile globale a tutti i corrieri mostrati nel widget. Per differenziare i corrieri visivamente o testualmente, usa lo stile di visualizzazione Personalizzato con i modelli di messaggio, dove puoi scrivere contenuto condizionale basato sul nome del corriere o su altre variabili.

Correlati​