Manuale del sito

Come è costruito il sito

Ogni tipo di pagina ha il suo modello, e ogni modello è una pila di sezioni che si possono riordinare, nascondere e configurare dall'editor del tema. Nell'editor, in alto, c'è il selettore della pagina che stai modificando: cambiando lì cambi il modello su cui stai lavorando, non solo la vista.

• Home — una sola sezione contenitore, riempita di blocchi: hero, strisce novità, gift card, Instagram, newsletter, garanzie, FAQ. Si aggiungono, si riordinano e si spengono come blocchi.
• Scheda prodotto — sette sezioni in fila: prodotto con galleria, «Torna disponibile», «Compra il look», «Completa il look», «Potrebbe piacerti anche», FAQ, striscia di prodotti in fondo.
• Collezione — griglia con filtri.
• Pagine speciali — Chi siamo, FAQ, pagine legali, Guida alle taglie, Premi, Area personale, Wishlist e le landing di campagna hanno ognuna il proprio modello: vedi il capitolo 12.

Hero — la foto grande di apertura

Vuole due immagini: una orizzontale per il desktop e una verticale per il telefono. Non mettere la stessa: quella da desktop sul telefono viene tagliata sui lati e si perde il capo. Al posto della foto si può caricare un video (solo desktop, con un'immagine poster di riserva).

• La scritta in sovraimpressione ha testo, larghezza e distanza dai bordi separati per desktop e mobile: la stessa posizione non funziona su entrambi.
• Overlay scuro — serve solo a rendere leggibile la scritta su una foto chiara. Se la scritta si legge già, tienilo a zero.
• Zoom lento — la foto respira piano. Intensità e durata regolabili; a intensità alta l'effetto diventa evidente e stanca.
• Le due voci «spazio riservato sotto» dicono all'hero quanto lasciare libero per header, striscia e barra annunci: se cambi l'altezza dell'header e l'hero non torna, sono quelle da correggere.

Le due strisce «Novità»

Sono due blocchi diversi con lo stesso nome, e vanno scelti in base al contenuto:

• Novità — striscia di testo che scorre, con separatore (per esempio ✦). Colori, maiuscolo, spaziatura e altezza regolabili.
• Novità (sfondo) — pannelli con immagine che scorrono, con cornice bianca uniforme e una scritta in basso a destra.

Gli altri blocchi

• Gift Card — banda scura con testo, pulsante e immagine facoltativa a destra o a sinistra. Va collegato il prodotto Gift Card, altrimenti il pulsante non porta da nessuna parte.
• Instagram — griglia di foto con intestazione, handle e link al profilo. Le immagini si caricano a mano, blocco per blocco: non si sincronizza con Instagram.
• Newsletter — raccolta email. Gli iscritti finiscono in Clienti con il consenso marketing.
• Garanzie — la striscia di rassicurazioni (spedizione, resi, pagamenti). Ogni voce è un sotto-blocco con icona e testo.
• FAQ — le domande frequenti anche in home; il contenuto è quello del capitolo 12.

Menu e aspetto sono due cose separate: se una voce non c'è, si aggiunge in Contenuto › Menu; se c'è ma è troppo grande o del colore sbagliato, si sistema nell'editor.

Il mega-menu

Le voci di primo livello con sotto-voci si aprono a tendina larga. Le immagini del mega-menu non arrivano dal menu: sono blocchi dell'header, con foto e link propri. Se cambi una voce di menu, l'immagine non la segue — va aggiornata a mano.

Barra annunci

• Più messaggi ruotano a intervallo regolabile; con un solo messaggio la rotazione è ininfluente.
• Si può mettere sopra o sotto l'header, con altezza e colori propri.
• Resta appiccicata in alto durante lo scorrimento, se l'opzione è attiva.

Pannelli laterali

Carrello, wishlist, account e ricerca si aprono come pannelli che scorrono da destra, senza far cambiare pagina. Larghezza, animazione e titolo di ciascuno si regolano nell'header. Le icone si accendono e spengono una per una: se togli la wishlist dall'header, la pagina wishlist resta raggiungibile solo dal link diretto.

I filtri

L'elenco dei filtri disponibili (taglia, colore, prezzo, disponibilità, categoria) si decide nell'app Search & Discovery, non nel tema: lì si aggiungono, si rinominano e si riordinano. Il tema decide solo come vengono disegnati.

• Su telefono i filtri si aprono a tutto schermo; su desktop stanno in colonna accanto ai prodotti.
• Colore e taglia si mostrano come pastiglie invece che come caselle. Il tema li riconosce dalle parole-chiave impostate nelle voci «Parole-chiave filtro COLORE» e «filtro TAGLIA»: se un filtro nuovo esce come casella normale, è perché il suo nome non compare in quelle parole-chiave.
• I filtri attivi restano visibili come etichette rimovibili sopra la griglia.

Bordino e colonne

Lo spazio bianco tra le card e dai bordi dello schermo è un unico valore, il bordino: tenerlo piccolo (4 px) dà l'effetto «muro di foto» che il sito usa oggi. È regolabile nella griglia e vale anche per le altre griglie di prodotti del sito.

La pagina con tutte le collezioni

Esiste una pagina che elenca le collezioni ad albero, costruita a partire dal menu: le voci di menu diventano le categorie e le sottocategorie. Si aggiorna da Contenuto › Menu, non a mano.

Cosa si può accendere o spegnere

• Prezzo e prezzo barrato — sui capi in saldo il prezzo pieno resta visibile barrato e lo scontato è rosso. Vale su tutto il sito, non solo in collezione.
• Percentuale di sconto — l'etichetta «−30%» calcolata da sola.
• Pastiglie colore — i colori disponibili sotto la foto, con un tetto di quante mostrarne.
• Wishlist — il cuore in alto sulla foto.
• Anteprima rapida — apre il prodotto in una finestra senza cambiare pagina.
• Aggiungi al carrello — vedi qui sotto.

Il pulsante Aggiungi sulla card

Ha quattro modalità. Quella in uso è «Wizard se richiesto»: sui capi a taglia unica aggiunge subito, su quelli con più taglie apre la finestra di scelta taglia. Le altre sono «Diretto» (aggiunge sempre la prima taglia disponibile: sconsigliato sull'abbigliamento), «Inline con taglie» (le taglie in un menù a tendina sulla card) e «Sempre wizard».

Esaurito

I capi esauriti restano visibili con un velo scuro e la scritta SOLD OUT, e le loro pastiglie taglia non sono cliccabili. Non vengono nascosti: chi cerca quel capo lo trova e può chiedere di essere avvisato (capitolo 11).

Galleria e taglie

La galleria mostra le foto del prodotto con zoom e schermo intero. Le taglie sono pastiglie: quelle esaurite restano visibili barrate, così si vede a colpo d'occhio cosa manca.

Guida alle taglie

Il link accanto alle taglie apre una finestra con la tabella di quel prodotto, che arriva dall'app Guida taglie: se il prodotto non ne ha una assegnata, la finestra rimanda alla pagina generale Guida alle taglie. Quella pagina mostra la scheda Uomo (la scheda Donna appare solo se la compili) con contenuto libero (capitolo 12).

Modello

Il riquadro «indossato da» con altezza e taglia indossata. I modelli sono schede riutilizzabili in Contenuto › Metaobject › Modello: si scrivono una volta e si collegano ai prodotti dal campo Modello · Chi indossa il capo. Un prodotto può averne più di una.

Torna disponibile

Compare da sé quando qualcosa è esaurito e cambia titolo se è esaurito tutto il capo o solo una taglia. Chiede l'email, mostra il consenso privacy col link all'informativa, e avvisa automaticamente quando la giacenza torna sopra zero. Tutti i testi sono modificabili nell'editor.

La striscia in fondo

Scorrendo le miniature in fondo la pagina cambia prodotto senza ricaricare. Mostra solo i capi disponibili, se l'opzione generale è attiva, e ha un tetto al numero di prodotti nella striscia.

Quando un prodotto ha un «Compra il look», «Completa il look» si nasconde da solo: due blocchi che dicono la stessa cosa, uno sotto l'altro, non servono. «Potrebbe piacerti anche» resta sempre.

Com'è già impostato

Tutti i prodotti attivi hanno già i quattro capi complementari, scelti con una regola: uno per categoria — a una giacca una t-shirt, dei jeans, un accessorio — così esce un look e non quattro giacche. Sono capi disponibili e con foto, e ruotano su tutto il catalogo invece di ripetere sempre gli stessi.

Sostituirli a mano su un prodotto

Nella scheda prodotto, riquadro Metafield:

• Complementary products — i capi di «Completa il look», fino a dieci.
• Related products — i capi di «Potrebbe piacerti anche», fino a dieci. Lasciandolo vuoto continua a decidere Shopify.
• Related products settings — come si combinano con la scelta automatica: ahead mette i tuoi davanti e Shopify completa il resto, only manual mostra soltanto i tuoi.

La scelta manuale vince sempre e non viene più sovrascritta dal precompilato. Gli stessi capi si possono scegliere anche dall'app Search & Discovery, alla voce consigli sui prodotti: è lo stesso dato, con un'interfaccia diversa.

Come funziona

Il look è una schedina riutilizzabile che contiene la foto e l'elenco dei capi. Il prodotto non contiene il look: ci punta, con un campo. Così lo stesso look si scrive una volta e si collega a tutti i capi dell'outfit: partendo dai pantaloni o dalla giacca, il cliente vede sempre l'insieme completo.

Un prodotto senza look non mostra il blocco. Non resta un titolo orfano né uno spazio vuoto.

Creare un look

1. Carica la foto in Contenuto › File. Meglio verticale, con l'outfit intero ben visibile.
2. Crea il look in Contenuto › Metaobject › Look (Shop the Look) › Aggiungi voce. Nome, foto e i prodotti nell'ordine in cui vuoi mostrarli (massimo otto). La didascalia è facoltativa.
3. Metti il look su Attivo. In bozza non si vede sul sito.
4. Collega ogni capo: apri ognuno dei prodotti dell'outfit e nel riquadro Metafield, campo Look · Compra il look, scegli il look.

I pallini numerati sulla foto

Nel campo Punti sulla foto si scrive una coppia di numeri per ogni capo, nello stesso ordine dei prodotti: il primo dice quanto sta a destra, il secondo quanto sta in basso, entrambi in percentuale. Il centro della foto è 50,50. Si stimano a occhio: 45,64 significa a metà larghezza, verso il basso.

• Il pallino 1 è sempre il primo capo dell'elenco.
• Si possono mettere i punti solo su alcuni capi: quelli senza coordinate restano nell'elenco, semplicemente senza pallino.
• Campo vuoto = nessun pallino, e il blocco funziona comunque come foto più elenco. È il modo più rapido per pubblicare un look.

Comprare dal look

Ogni capo ha il pulsante Aggiungi: sui capi con più taglie apre la scelta della taglia, su quelli a taglia unica finisce direttamente nel carrello. Il capo che si sta guardando non ha il pulsante — il suo «Aggiungi al carrello» sta poco sopra — ed è marcato Questo capo. I capi esauriti restano nell'elenco con «Esaurito».

Usarlo anche fuori dalla scheda prodotto

Il blocco si può aggiungere a home o a una pagina. Lì non c'è nessun prodotto da cui dedurre il look, quindi va scritto il nome tecnico del look (il suo handle, per esempio marrone-e-bordeaux) nel campo apposito della sezione. Sulla scheda prodotto quel campo va lasciato vuoto.

I tre campi dei capi collegati (Complementary products, Related products, Related products settings) sono in inglese e non sono rinominabili: appartengono all'app Search & Discovery. Stanno sotto il gruppo «Look ·» proprio per tenerli vicini a quello che fanno.

Il pannello laterale

• Apertura automatica quando si aggiunge un capo: è attiva. Spegnendola l'aggiunta è silenziosa e il cliente rischia di non accorgersene.
• Soglia spedizione gratuita — il valore che alimenta la barra «ti mancano X € alla spedizione gratuita». Va tenuta allineata alla soglia vera impostata nelle spedizioni: qui è solo il messaggio, non la regola. Se le due non coincidono, il cliente si sente ingannato al checkout.
• Note d'ordine — il campo per messaggi del cliente, attivo.
• Consigli nel pannello — spento per non appesantire l'apertura.

La pagina carrello

È una pagina scritta su misura, non quella standard di Shopify: mostra le righe con foto, taglia e quantità, e sotto un riquadro «Ti potrebbe piacere» con quattro capi presi da una collezione che si scegle nell'editor. Se quella collezione è vuota, il riquadro non compare.

La finestra dopo l'aggiunta

Su alcune pagine, invece del pannello, si apre una finestra di conferma con il capo aggiunto e la possibilità di mostrare qualche consiglio. Anche i consigli qui sono spenti per default: si accendono solo se serve spingere il carrello medio, sapendo che rallentano l'apertura.

Wishlist

Il cuore sulle card e sulla scheda prodotto. C'è anche una pagina wishlist dedicata e un pannello che si apre dall'header.

• Chi non ha l'account — la lista resta salvata nel suo browser: se cambia telefono o svuota i dati, la perde. È voluto: chiedere la registrazione per salvare un capo fa perdere il capo e il cliente.
• Chi ha l'account — la lista viene salvata sul server e lo segue su tutti i dispositivi. Al primo accesso le due liste si uniscono, non si sovrascrivono.
• La lista si può condividere con un link.

Torna disponibile

Sulla scheda di un capo esaurito compare da sé il riquadro per lasciare l'email. Il cliente scegle la taglia che gli interessa: l'avviso è per quella taglia, non per il capo in generale. Quando la giacenza torna sopra zero, l'email parte automaticamente.

• Il titolo cambia da solo: «Prodotto esaurito» se è finito tutto, «Taglia esaurita? Fatti avvisare» se manca solo una misura.
• Tutti i testi, il consenso privacy e il link all'informativa sono modificabili nell'editor.
• Chi è già in lista per quella taglia riceve un messaggio dedicato invece di iscriversi due volte.

Le FAQ

Le domande frequenti compaiono in tre punti: nella pagina dedicata, in home e in fondo alla scheda prodotto. Il contenuto può arrivare da tre sorgenti, e la sezione dice quale sta usando:

• Blocchi — le domande scritte direttamente nell'editor, una per blocco. È la via più semplice.
• Scheda riutilizzabile — un elenco di domande scritto una volta in Contenuto › Metaobject e usato in più punti.
• Campo del prodotto — domande specifiche di quel capo, sulla sua scheda.

Le FAQ hanno anche un effetto SEO: Google può mostrarle direttamente nei risultati di ricerca, quindi vale la pena scriverle come risposte complete e non come frasi mozze.

Le pagine legali

Il modello «legal» impagina il testo per la lettura lunga. Attenzione a una cosa: la pagina Resi e l'informativa sui resi nelle impostazioni del negozio sono due testi diversi che il cliente confronta. Vanno tenuti d'accordo: se la pagina promette qualcosa che l'informativa esclude, vince l'informativa e la pagina diventa un problema.

La pagina con la password

Quando il negozio è protetto da password, chi arriva vede una pagina d'attesa al posto del sito: sfondo, logo, testo e conto alla rovescia sono tutti configurabili — sono quattro sezioni dedicate nell'editor, sotto la vista Password.

Le campagne

Per saldi e lanci esiste un modello campagna: si crea una pagina, si sceglie quel modello e si compone la landing nell'editor, senza toccare la home. Utile perché la pagina si può preparare in anticipo e pubblicare quando serve.

Lavorare su un tema di prova

Per un cambio importante — un restyling, la veste dei saldi — si duplica il tema pubblicato, si lavora sulla copia e si pubblica quando è pronta. In questo modo il sito online non mostra mai lavori a metà.

Le scelte di fondo

• Nero e bianco — il testo è nero quasi pieno, i fondi sono bianchi. Il rosso è riservato ai prezzi scontati: usarlo per altro gli toglie forza.
• Due caratteri — uno per i titoli e le etichette, uno per il testo corrente. Non aggiungerne un terzo.
• Angoli vivi — nessun angolo arrotondato, tranne i cerchi (pallini, pastiglie tonde). È una scelta di stile, non una dimenticanza: rimettere gli arrotondamenti cambia il carattere del sito.
• Il bordino — l'unico spazio bianco tra le foto e dai bordi dello schermo. Un valore solo, che regola tutte le griglie del sito.

Gli schemi colore

Molte sezioni hanno una voce «schema colore» invece di due caselle colore: si scegle uno degli schemi definiti nelle impostazioni del tema. Cambiando lo schema si cambiano insieme tutte le sezioni che lo usano — che è il modo giusto di cambiare aspetto, invece di ritoccare venti sezioni a mano.

«Ho modificato ma non vedo niente»

• Colore sbagliato. Ogni colore è un prodotto a sé: hai compilato il marrone e stai guardando il nero.
• Un minuto di attesa. I capi collegati e i consigli passano da una cache: dopo la modifica servono una sessantina di secondi.
• La pagina è quella vecchia. Ricarica tenendo premuto Maiuscolo: il browser tiene in memoria la versione precedente.
• Sei su un altro tema. Se esistono più temi, l'editor potrebbe essere aperto su una copia e non su quello online.
• La scheda è in bozza. Un look, un modello o una tabella taglie in bozza non si vedono, anche se collegati correttamente.

«La sezione non compare»

Diverse sezioni si nascondono da sole quando non hanno dati: «Compra il look» senza look, «Torna disponibile» con tutte le taglie disponibili, «Ti potrebbe piacere» con la collezione vuota. È voluto: meglio niente che un titolo con il vuoto sotto. Prima di pensare a un guasto, controlla che il dato ci sia.

Prima di toccare cose delicate

• Duplica il tema prima di un lavoro grosso: le modifiche sul tema pubblicato sono online subito.
• Non cancellare una sezione per «spegnerla»: usa l'occhio per nasconderla. Cancellandola perdi tutte le sue impostazioni.
• Non mettere in bozza un capo esaurito se qualcuno ha chiesto di essere avvisato: l'avviso non partirà.
• Soglia spedizione gratuita: quella scritta nel carrello è solo il messaggio. La regola vera sta nelle spedizioni, e le due vanno tenute uguali.

Le pagine che devono restare d'accordo

Pagina Resi, informativa sui resi e FAQ dicono le stesse cose in tre posti. Modificandone una, vanno riviste le altre due: una promessa diversa in un punto solo è il tipo di incoerenza che genera contestazioni.

Come funziona

Il prodotto va messo Attivo (non in bozza) con il tag anteprima. Per i clienti non esiste: non compare in griglia, nelle ricerche, nei suggerimenti, nei capi collegati né nell'anteprima veloce; il suo indirizzo diretto mostra «Prodotto non disponibile» e i motori di ricerca ricevono l'ordine di non indicizzarlo. Lo staff invece lo vede esattamente dove starà, con l'etichetta «Anteprima» sulla card e una linguetta «Anteprima staff» sul bordo sinistro della pagina che ricorda la modalità.

Pubblicare un nuovo arrivo, passo per passo

1. Carica il prodotto, compila foto, prezzo, taglie e collezioni come sempre.
2. Mettilo Attivo e aggiungi il tag anteprima. Controlla che sia pubblicato sul canale Online Store (nel pannello a destra della scheda).
3. Apri il sito loggato come cliente staff (vedi sotto) e guarda griglia, posizione, card, scheda. Sistema quello che non va.
4. Quando è pronto, togli il tag anteprima: è pubblico all'istante. Per più prodotti insieme: seleziona i prodotti › Modifica in blocco › Tag.

Chi è «staff»

Un account cliente del sito con il tag staff (Clienti › apri il cliente › Tag). L'accesso all'amministrazione Shopify non c'entra: il sito riconosce solo il cliente che ha fatto il login dall'icona Account, con il codice via email. Per abilitare una persona: crea o apri il suo cliente, aggiungi il tag, falla accedere sul sito. Lo stesso tag apre questo manuale.

Senza login, la stessa vista si ha dall'editor del tema (Personalizza): nell'anteprima dell'editor i prodotti in anteprima si vedono sempre.

Cosa aspettarsi

• La linguetta non c'è → il sito non ti riconosce come staff: non sei loggato come cliente, o lo sei con un altro account. Se eri già dentro quando è stato aggiunto il tag, esci e rientra.
• Prima pagina più corta. Se in una collezione ci sono 4 prodotti in anteprima, il pubblico vede 20 card invece di 24 nella prima pagina: i nascosti occupano il loro posto nell'ordine. Sparisce togliendo il tag.
• Anteprima veloce in ritardo. La finestra «occhio» passa da una cache: dopo aver tolto il tag può servire qualche minuto.
• Il conteggio «N prodotti» in cima alla collezione conta anche i nascosti.