Quando un cliente personalizza uno dei tuoi prodotti, compila un piccolo modulo accanto all’anteprima dal vivo. Questa guida spiega ogni tipo di campo che quel modulo può mostrare, così sai cosa vedono i tuoi clienti e come si comporta ciascuno. È scritta per i commercianti che vogliono capire il customizer dal lato dell’acquirente.
Sei tu a decidere quali campi compaiono quando costruisci il prodotto nel Design Studio. Il customizer poi mostra il controllo giusto per ciascuno. Ecco cosa fa ogni campo.
Si dividono in tre gruppi: gli input generali (testo, scelte, numeri e date), i selettori (colore e font) e i campi che appartengono a un elemento specifico del design.
Testo e area di testo
Un campo di testo è una sola riga. Il cliente digita un nome, una data o una breve frase, e il testo finisce direttamente nel testo corrispondente del design.
Un’area di testo è la versione su più righe. Cresce man mano che il cliente aggiunge righe, quindi va bene per messaggi più lunghi come un biglietto o una breve poesia.
Quando imposti una lunghezza massima su un campo di testo, il customizer mostra un contatore di caratteri dal vivo sotto il campo. Si aggiorna mentre il cliente scrive, per esempio 12/30, così sa sempre quanto spazio gli resta. Il contatore compare solo quando esiste un limite.
I campi di testo e le aree di testo possono avere anche scelte di font e colore. Quando le permetti, piccoli riquadri di font e campioni di colore compaiono direttamente sotto il campo. Il cliente ne sceglie uno e il testo del design si aggiorna di conseguenza. Questo aspetto di tali campi è trattato in scegliere colori e font.
Per un campo di testo a riga singola, una regola di formato configurata può mostrare un errore in linea come «Il formato di Nome non è valido». Le aree di testo non offrono lo stesso controllo di formato dal vivo. Leggi gli eventuali messaggi di convalida rimasti quando invii il design.
Scelte: menu a tendina, radio, casella di controllo
Questi tre tipi di campo fanno scegliere al cliente tra opzioni che definisci tu, invece di scrivere liberamente.
Un menu a tendina mostra un elenco di opzioni. Con dieci opzioni o meno resta un semplice elenco. Con più di dieci, il customizer lo trasforma in un elenco con ricerca, che si filtra mentre si digita. Il cliente comincia a scrivere e l’elenco si restringe alle opzioni corrispondenti, così un elenco lungo resta facile da scorrere.
Le scelte radio mostrano ogni opzione come una pillola. Il cliente ne tocca una per selezionarla. Puoi associare a ogni scelta una piccola immagine o un campione di colore, così la pillola mostra un’anteprima accanto all’etichetta. Funziona bene per cose come lo stile di una cornice o il colore di un filo.
Una casella di controllo è un interruttore sì o no. Attiva o disattiva un livello del design, così il cliente può aggiungere o togliere una parte della grafica, come un disegno sul retro della maglietta o una riga di testo in più.
Se l’elenco delle opzioni è vuoto, il customizer nasconde quel campo al cliente. Il campo resta nascosto finché non aggiungi almeno una scelta nel Design Studio.
Numero e data
Un campo numerico ha i pulsanti meno e più ai lati di un valore modificabile. Il pulsante meno si ferma al minimo configurato e il pulsante più al massimo; entrambi usano il passo configurato. I clienti possono anche digitare un valore, quindi controlla i messaggi di convalida del campo prima di continuare.
Un campo data usa il selettore di date del dispositivo. Su telefono è la ruota delle date nativa, su desktop è il controllo data del browser. Un campo mese del calendario funziona allo stesso modo ma usa il selettore di mesi del dispositivo, quindi il cliente sceglie un mese e non una data completa.
Qualunque cosa scelga il cliente finisce nel testo corrispondente del design, proprio come un campo di testo.
Selettori di colore e font
Un campo colore è una fila di campioni sotto il titolo Scegli un colore. I campioni sono i colori che hai consentito quando hai costruito il prodotto, quindi un cliente non può scegliere qualcosa che il tuo processo di stampa non sa produrre. Il campione scelto prende un bordo evidenziato.
Un campo font apre un elenco Scegli un carattere. Parte su Scegli un carattere… e, quando l’elenco è lungo, ha una casella Cerca caratteri… che si restringe mentre il cliente digita. Compaiono solo i font che hai consentito.
Dal punto di vista del cliente funzionano entrambi come un menu a tendina: ne scegli uno e il design si aggiorna dietro il modulo.
Campi che appartengono a un elemento
Alcuni campi non sono affatto input generali. Appartengono a un elemento specifico del design, e il customizer mostra il controllo di cui quell’elemento ha bisogno:
- Un campo foto è un’area di caricamento. Vedi caricare una foto.
- Un campo grafica è un selettore della tua grafica. Vedi lascia che i clienti scelgano una grafica.
- Un campo mappa, percorso o viaggio offre una ricerca di luoghi, un caricamento di file o un elenco di tappe.
- Un campo mappa stellare, luna o calendario offre una data e a volte un’ora e un luogo.
- Un campo avatar apre il costruttore di personaggi.
Questi seguono le regole che imposti su quell’elemento, non un tipo di campo generico. Ognuno è trattato in panoramica degli elementi smart.
Altri due arrivano dal prodotto e non dal design: un selettore di variante per la versione che si sta comprando e un selettore di add-on per gli extra. Vedi add-on.
Campi obbligatori e convalida
Puoi segnare qualsiasi campo come obbligatorio. Un campo obbligatorio mostra un asterisco accanto all’etichetta, così il cliente sa che va compilato.
Se un campo obbligatorio è vuoto quando il cliente preme Aggiungi al carrello, il customizer blocca l’azione e indica il campo da completare. Compilarlo risolve quell’errore di campo mancante; altri controlli di convalida o di disponibilità possono comunque richiedere attenzione.
Dove compare il messaggio dipende dal layout che hai scelto. Un customizer a pagina singola non ha nulla da rifiutare fino ad Aggiungi al carrello, e dice «Completa» seguito dal nome del campo. Uno a passaggi rifiuta prima, al limite del passaggio, e dice «Compila:» seguito dal nome del campo; lo mostra il prodotto non si aggiunge al carrello.
I limiti di lunghezza di testo e aree di testo mostrano un contatore dal vivo. Un campo di testo a riga singola può anche mostrare un errore di formato in linea mentre il cliente scrive. Controlla gli eventuali messaggi rimasti quando invii il design.
Perché il mio menu a tendina non mostra una casella di ricerca?
La casella di ricerca compare solo quando il menu a tendina ha più di dieci opzioni. Con dieci o meno resta un semplice elenco.
Dove scelgo quali campi sono obbligatori?
I campi obbligatori si impostano nel Design Studio quando costruisci il prodotto, non nel customizer.
Un cliente può scrivere oltre il limite di caratteri?
No. La lunghezza massima che imposti impedisce di scrivere oltre, e il contatore mostra quanto manca.
Per configurare questi campi e decidere quali possono modificare i clienti, vedi rendere i campi modificabili dai clienti.
Prossimo passo: come un cliente personalizza un prodotto.