Design della Pagina Prodotto Ecommerce: Anatomia ed Esempi
Design della Pagina Prodotto Ecommerce
Design della Pagina Prodotto: Anatomia, Esempi dal Vivo, Checklist | We.Inc
L'anatomia di una pagina prodotto ecommerce con layout modificabili dal vivo, una checklist di autoverifica e dati strutturati Product conformi ai requisiti attuali di Google.
Una pagina prodotto deve rispondere a tre domande prima del pulsante di acquisto: cos'è, se fa per me e cosa succede dopo che ho pagato. Su desktop metti above the fold foto chiare, nome, prezzo e opzioni, poi più in basso consegna, resi e dettagli, e marca prezzo e disponibilità con i dati strutturati Product.
Anatomia della pagina prodotto, dall'alto verso il basso
Parte
Compito
Errore comune
Galleria
Mostra l'articolo da ogni angolazione, in uso e in scala
Una sola foto in studio
Nome e prezzo
Conferma che è l'articolo giusto a un costo noto
Prezzo nascosto fino al checkout
Opzioni
Taglia, colore, quantità con disponibilità chiara
Esaurito scoperto solo dopo la scelta
Aggiungi al carrello
L'unica azione principale
Pulsanti in competizione con lo stesso peso
Consegna e resi
Elimina la preoccupazione del dopo acquisto
Policy solo nel footer
Dettagli e specifiche
Materiali, dimensioni, cura
Muro di testo senza titoli
Domande
Risposte ai dubbi che bloccano la decisione
Del tutto assenti
Invece di screenshot di altri negozi, questa guida costruisce parte per parte una pagina prodotto per uno studio di ceramica inventato, in semplice HTML e CSS. Usa la checklist per valutare la tua pagina e copia i dati strutturati conformi alle regole attuali di Google.
Valuta la tua pagina prodotto attuale con la checklist e scopri quali parti mancano.
Apri gli esempi di layout dal vivo e modificali con i dettagli del tuo prodotto.
Copia il JSON-LD Product e compilalo con lo stesso prezzo e la stessa disponibilità mostrati nella pagina.
Testa il markup con il Test dei risultati multimediali di Google prima di pubblicare.
Scrivi la data o l'intervallo di consegna vicino al pulsante, non solo il costo. Le persone si organizzano in base a quando arriva.
Mostra la disponibilità su ogni opzione prima che venga scelta, così nessuno seleziona una taglia esaurita.
Usa dimensioni reali e una foto con qualcosa di familiare per dare la scala, come una mano o una tazza.
Mantieni l'etichetta del pulsante specifica e uguale ovunque, per esempio Aggiungi al carrello.
I dati strutturati devono corrispondere alla pagina. Un prezzo nel markup diverso da quello sullo schermo è un motivo per cui Google li ignora.
Domande frequenti
Cosa deve stare above the fold in una pagina prodotto?
Su desktop: la foto principale, il nome del prodotto, il prezzo, i selettori delle opzioni e il pulsante aggiungi al carrello. Sui telefoni la foto di solito riempie la prima schermata, quindi assicurati che nome e prezzo vengano subito dopo, con il pulsante poco sotto.
Quali dati strutturati servono a una pagina prodotto?
Per le pagine in cui si può acquistare, la documentazione di Google sulle schede commerciante richiede Product con name, image e offers, e un Offer con un prezzo maggiore di zero e un priceCurrency. Disponibilità, dettagli di spedizione, policy di reso, brand e GTIN sono consigliati.
Che differenza c'è tra snippet prodotto e schede commerciante?
Gli snippet prodotto sono per le pagine in cui non si può acquistare direttamente, come le recensioni, e richiedono un nome più uno tra review, aggregateRating o offers. Le schede commerciante sono per le pagine che vendono il prodotto e richiedono prezzo e valuta.
Devo mostrare le recensioni nelle pagine prodotto?
Se ne hai di vere, sì, vicino al prezzo o sotto i dettagli. Non inventare mai recensioni o valutazioni, e aggiungi il markup aggregateRating solo quando la valutazione è mostrata nella pagina e proviene da clienti reali.
Le foto fanno quasi tutta la vendita
Pianifica la galleria come un insieme: fronte, retro o lato, primo piano del materiale, l'articolo in uso e una foto con qualcosa che dia la scala. Ogni immagine ha bisogno di un testo alternativo che descriva cosa mostra quella vista.
Riserva lo spazio della galleria con width e height o aspect-ratio, così la pagina non salta mentre le immagini si caricano.
Il riquadro di acquisto
Raggruppa prezzo, opzioni, quantità e pulsante, con il riepilogo di consegna e resi subito sotto. Quel blocco da solo dovrebbe rispondere alla maggior parte delle domande senza scorrere.
Le opzioni disattivate richiedono più di un testo grigio. Aggiungi la parola Esaurito all'etichetta così lo stato è chiaro a tutti, compresi gli utenti di screen reader.
Dettagli che riducono i resi
Dimensioni, materiali, istruzioni di cura e contenuto della confezione vanno in sezioni con titoli, facili da scorrere. Una breve nota su taglia o vestibilità evita molti ordini sbagliati.
Rispondi direttamente nella pagina alle due o tre domande che i clienti fanno più spesso, e rimanda alle FAQ complete per il resto.
Esempi di layout per la pagina prodotto
Pagina prodotto a due colonne con galleria e riquadro di acquisto
Sugli schermi larghi galleria a sinistra e riquadro di acquisto a destra; sui telefoni si impilano. La taglia esaurita lo dice a parole, non solo con il grigio.
Dettagli in sezioni con etichetta
Brevi sezioni con titolo si scorrono più facilmente di un'unica lunga descrizione. La prima è aperta perché risponde alla domanda più comune.
Dati strutturati Product per una pagina che vende
name, image e offers con price e priceCurrency sono i campi obbligatori per le schede commerciante; availability e gli altri sono consigliati. I valori devono corrispondere alla pagina.
Almeno quattro foto, di cui una in uso e una che mostra la scala
Ogni immagine ha un testo alternativo che descrive quella vista
Prezzo visibile accanto al nome del prodotto
Disponibilità mostrata su ogni opzione prima della scelta
Un solo pulsante aggiungi al carrello chiaramente principale
Costo e tempi di consegna mostrati vicino al pulsante
Policy di reso riassunta vicino al pulsante
Dimensioni, materiali e cura in sezioni con etichetta
Domande più comuni con risposta nella pagina
Funziona a 375 px di larghezza senza scorrimento laterale
I dati strutturati Product corrispondono al prezzo e alla disponibilità visibili
Solo recensioni vere, se ne vengono mostrate
Checklist della pagina prodotto
Spunta ciò che la tua pagina prodotto fa già. Il punteggio mostra cosa resta da sistemare; nulla viene salvato o inviato da nessuna parte.