Informazioni sul prodotto

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione Shopify su metafield e fonti dinamiche
3. Documentazione Company XYZ sul blocco del titolo
4. Documentazione Company XYZ sul blocco del prezzo
5. Documentazione Company XYZ sul blocco del selettore di varianti
6. Documentazione Company XYZ sul blocco del selettore della quantità
7. Documentazione Company XYZ sul blocco dei pulsanti di acquisto
8. Documentazione Company XYZ sul blocco della descrizione
9. Documentazione Company XYZ sul blocco a fisarmonica
10. Documentazione Company XYZ sul blocco dei prodotti complementari
11. Documentazione Company XYZ sulle impostazioni del padding della sezione
12. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
13. Documentazione Company XYZ sulle impostazioni dei separatori
14. Documentazione Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify: 9 suggerimenti per ottimizzare le pagine prodotto e aumentare le vendite

Video Shopify: 9 suggerimenti per ottimizzare le pagine prodotto e aumentare le vendite

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Questa sezione è l’area principale dei dettagli del prodotto nei modelli prodotto. Combina la galleria del prodotto con una pila personalizzabile di blocchi di contenuto, così può controllare come gli acquirenti visualizzano i media, confrontano le opzioni, leggono i dettagli e passano all’acquisto. Per una panoramica più ampia della creazione del layout del tema, veda documentazione Shopify su sezioni e blocchi

Impostazioni principali

Questa sezione è progettata per essere riorganizzata blocco per blocco. Nella maggior parte delle configurazioni, la struttura di partenza più efficace è titolo, prezzo, selettore di varianti, selettore quantità, pulsanti di acquisto, quindi contenuti di supporto come descrizione, accordion e blocchi di creazione della fiducia.

Se il Suo catalogo include tipi di prodotto molto diversi, questa sezione Le offre abbastanza flessibilità per mantenere una struttura di pagina coerente, adattando al tempo stesso l’enfasi dei contenuti per ciascun prodotto.

Impostazioni galleria

Le impostazioni della galleria controllano come i contenuti multimediali del prodotto appaiono su desktop e mobile. Può modificare i rapporti d’aspetto, l’equilibrio tra la galleria e le colonne di contenuto, la posizione della galleria sugli schermi più grandi e lo stile della galleria usato su ciascun dispositivo.

Su desktop dispone di un maggiore controllo sul layout, incluso il lato in cui appare la galleria e la colonna che riceve più spazio. Su mobile, la sezione si impila sempre in un’unica colonna, quindi la decisione principale è quale stile di galleria sia più facile da consultare su uno schermo più piccolo.

Usi stili di galleria più visivi per i prodotti che dipendono da fotografia, finiture o dettagli ravvicinati. Usi layout più semplici quando la pagina deve dare priorità a specifiche, scelte di varianti o testi di prodotto più lunghi.

La galleria può anche reagire ai cambi di variante. Questo è particolarmente utile per prodotti basati sul colore o sulla finitura, in cui l’opzione selezionata dovrebbe cambiare immediatamente i media visibili.

Il comportamento della galleria basato sulle varianti richiede un blocco Variant selector in questa sezione. Senza di esso, la galleria non si aggiornerà in base ai cambi di opzione.

Lo zoom e i controlli video aiutano a perfezionare l’esperienza dei media. Lo zoom lightbox è una buona soluzione quando i clienti devono esaminare la texture o i dettagli, mentre la riproduzione automatica dei video funziona meglio per clip brevi anziché per dimostrazioni lunghe.

Consiglio

Se attiva la riproduzione automatica dei video, li mantenga disattivati per un’esperienza di navigazione più fluida.

Impostazioni della presentazione

Queste impostazioni si applicano quando la galleria usa un layout a presentazione. Può controllare la larghezza visibile della slide, lo stile e la velocità dell’animazione, la riproduzione automatica, il ciclo continuo, la navigazione e l’impaginazione.

Una presentazione con anteprime parziali della slide successiva può rendere gli insiemi di media di grandi dimensioni più interattivi. Se passa all’animazione dissolvenza, la galleria si comporta più come una presentazione a slide singola, quindi alcune opzioni dell’interfaccia multi-slide diventano meno utili.

La riproduzione automatica è ideale per sequenze visive brevi. Per i prodotti in cui gli acquirenti devono confrontare attentamente immagini statiche, la navigazione manuale è di solito la scelta più sicura.

Tipi di blocco supportati

1. App
2. Accordion
3. Buy buttons
4. Benefits
5. Button
6. Complementary products
7. Contact form
8. Custom liquid
9. Description
10. Heading
11. Icon with text
12. Image
13. Price
14. Quantity selector
15. Rich text
16. Separator
17. Social media icons
18. Title
19. Testimonial
20. Variant selector
21. Video

Guida chiave ai blocchi

Titolo

Il blocco Title mostra il nome del prodotto e può anche visualizzare azioni di condivisione o stampa. Di solito funziona meglio nella parte superiore della pila di contenuti. Scopri di più sul Titolo.

Prezzo

Il blocco Price mostra il prezzo corrente e un messaggio facoltativo sulle policy. Posizionarlo vicino al titolo e ai controlli di acquisto aiuta gli acquirenti a confrontare prezzo e opzioni senza dover scorrere avanti e indietro. Scopri di più sul Prezzo.

Selettore di varianti

Il blocco Variant selector consente agli acquirenti di scegliere le opzioni del prodotto e può anche visualizzare campioni di colore o di immagine. Abilita anche il comportamento della galleria basato sulle varianti della sezione. Scopri di più sul Selettore varianti.

I menu a discesa sono in genere più facili per elenchi lunghi di opzioni, mentre i pulsanti a pillola o i campioni sono migliori per insiemi di opzioni brevi e visivi. Se usa i campioni, si assicuri che i nomi delle opzioni corrispondano esattamente alla denominazione delle opzioni del prodotto.

Nota

I campioni immagine sostituiscono i campioni colore quando entrambi sono configurati per la stessa opzione.

Selettore quantità

Il blocco Quantity selector aggiunge controlli di quantità e un messaggio facoltativo sulla disponibilità. È più utile se posizionato direttamente sopra o sotto i pulsanti di acquisto. Scopri di più sul Selettore quantità.

Se attiva il messaggio di scorte basse, imposti la soglia abbastanza bassa da sembrare credibile e specifica per il prodotto.

Pulsanti di acquisto

Il blocco Buy buttons è l’area principale dell’azione di acquisto. Può anche mostrare pulsanti di checkout aggiuntivi, dettagli sulla spedizione gratuita, informazioni sul ritiro locale, icone di pagamento, opzioni per il destinatario della gift card, messaggi sulle rate e una barra fissa durante lo scorrimento. Scopri di più sul Pulsanti di acquisto.

Usi in modo selettivo i dettagli di acquisto di supporto. Troppe aggiunte attorno al pulsante principale possono far sembrare l’area di acquisto affollata, soprattutto su mobile.

Se qui sostituisce i colori del pulsante, controlli sia lo stato predefinito sia lo stato hover per assicurarsi che l’azione principale rimanga evidente e leggibile.

Descrizione

Il blocco Description mostra la descrizione principale del prodotto e può essere reso espandibile. Scopri di più sul Descrizione.

Le descrizioni espandibili sono una buona soluzione per testi di prodotto lunghi. Per descrizioni più brevi, mostrare subito il testo completo di solito risulta più semplice.

Accordion

Il blocco Accordion è utile per FAQ, materiali, istruzioni per la cura, indicazioni sulle taglie e dettagli sulla spedizione. Può usare contenuti inseriti direttamente oppure recuperare contenuti da altre origini di contenuto. Scopri di più sul blocco Accordion.

Separi gli argomenti in righe diverse invece di combinare tutto in un unico pannello lungo. In questo modo i dettagli secondari sono più facili da scansionare. Per i contenuti provenienti dai dati prodotto, veda documentazione Shopify su metafield e origini dinamiche

Prodotti complementari

Il blocco Complementary products aggiunge articoli correlati che si abbinano al prodotto corrente. Funziona bene per accessori, ricariche o aggiunte ricorrenti. Scopri di più sul Prodotti complementari.

Scelga un layout compatto se questo blocco appare all’interno di una pagina prodotto molto densa. Se usa un layout a presentazione, mantenga visibile la navigazione così che i consigli non diano l’impressione di essere nascosti.

Blocchi di contenuto di supporto

Usi i blocchi rimanenti per adattare la pagina alla storia del prodotto e al flusso di acquisto.

1. Usi Benefits, Icon with text o Testimonial per rafforzare fiducia e valore.
2. Usi Image o Video per aggiungere contenuti visivi secondari nella colonna delle informazioni.
3. Usi Rich text, Heading e Separator per strutturare con maggiore chiarezza i contenuti più lunghi.
4. Usi Button per azioni secondarie come guide alle taglie o pagine di cura.
5. Usi i blocchi Social media icons, Contact form, Custom liquid o App solo quando supportano un obiettivo chiaro della pagina prodotto.

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto questa sezione. Nelle pagine prodotto, uno spazio più ridotto mantiene di solito la galleria e i controlli di acquisto più vicini alla parte superiore, mentre uno spazio maggiore crea un aspetto più editoriale.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione Le consentono di aggiungere un colore, un gradiente, un’immagine o un video dietro l’intera sezione prodotto. Questo può aiutare a creare un aspetto di marca più forte, ma i trattamenti più discreti di solito funzionano meglio in una sezione che contiene già molti contenuti funzionali.

Attenzione

Sfondo o overlay intensi possono ridurre la leggibilità di prezzi, selettori di opzioni e pulsanti di acquisto. Ricontrolli il contrasto dopo aver stilizzato la sezione.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea facoltativa nella parte superiore o inferiore della sezione. Sono più utili quando l’area prodotto richiede una separazione visiva più chiara rispetto ai contenuti vicini.

Impostazioni di larghezza

Impostazioni di larghezza controllano sia la larghezza del contenuto sia la larghezza esterna della sezione. I layout più ampi sono adatti ai prodotti guidati dalle immagini, mentre i layout più stretti possono migliorare la leggibilità delle pagine prodotto con molti testi.

L’editor può rendere più difficile valutare con precisione le modifiche alla larghezza, quindi controlli le modifiche importanti al layout nella pagina live prima di finalizzarle.

Note sull’uso

1. Mantenga insieme le azioni di acquisto. Posizioni titolo, prezzo, selettore di varianti, selettore quantità e pulsanti di acquisto vicini tra loro, così gli acquirenti possono agire senza cercare nella pagina.
2. Abbini i media al prodotto. Usi layout di galleria più ricchi per prodotti visivi e gallerie più semplici quando le opzioni, le specifiche o il testo richiedono maggiore attenzione.
3. Usi gli accordion per i dettagli secondari. Sposti FAQ, materiali, note sulla spedizione e informazioni sulla cura in righe accordion separate per mantenere focalizzata l’area contenuto principale.
4. Controlli il flusso mobile. Poiché la sezione diventa una singola colonna su schermi più piccoli, esamini con attenzione l’ordine dei media, la pila dei blocchi e la visibilità del pulsante di acquisto.
5. Riveda entrambe le dimensioni del viewport. I controlli su desktop e mobile possono modificare layout, allineamento e comportamento dei media in modi diversi, quindi controlli entrambe le viste prima di pubblicare.
6. Faccia attenzione alle modifiche guidate dai blocchi. L’aggiunta o la riorganizzazione dei blocchi può cambiare in modo significativo l’equilibrio della pagina prodotto, quindi ricontrolli la sezione quando modifica la pila di contenuti.
7. Confermi i consigli con dati prodotto reali. I contenuti dei prodotti complementari compaiono solo quando sono disponibili il contesto del prodotto e gli elementi restituiti, quindi gli stati vuoti non dovrebbero essere considerati un errore di configurazione.
8. Anteprima i layout stilizzati fuori dall’editor. Le modifiche a larghezza, sfondo e spaziatura possono sembrare diverse nella pagina live rispetto a come appaiono nell’editor.