Prodotto in evidenza

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Documentazione Company XYZ sul blocco del selettore delle varianti
3. Documentazione Company XYZ sul blocco dei pulsanti di acquisto
4. Documentazione Company XYZ sul blocco dei prodotti complementari
5. Documentazione Company XYZ sul blocco a fisarmonica
6. Documentazione Company XYZ sulle impostazioni del padding della sezione
7. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
8. Documentazione Company XYZ sulle impostazioni dei separatori
9. Documentazione Company XYZ sulle impostazioni di visibilità
10. 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 Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Mostrate un’esperienza completa di dettaglio prodotto e acquisto su quasi qualsiasi pagina. Questa sezione combina la galleria di un prodotto selezionato, le informazioni sul prodotto e blocchi di contenuto flessibili, così potete creare landing page mirate, promozioni in homepage o contenuti editoriali sul prodotto attorno a un singolo articolo. Per una panoramica più ampia di come funzionano sezioni e blocchi nell’editor del tema, consultate la documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

Iniziate selezionando il Product. Questa scelta alimenta la galleria, il titolo, il prezzo, la descrizione, le varianti, i controlli consapevoli dell’inventario e le azioni di acquisto usate in tutta la sezione.

Se non viene selezionato alcun prodotto, il layout può comunque mostrare blocchi di contenuto generali, ma i blocchi specifici del prodotto e i controlli di acquisto non saranno utili.

Impostazioni galleria

Usate le impostazioni della galleria per definire l’aspetto dei media del prodotto su desktop e mobile. Potete scegliere rapporti di aspetto separati per ogni dispositivo, controllare il bilanciamento delle colonne su desktop e posizionare la galleria a sinistra o a destra delle informazioni sul prodotto.

Lo stile della galleria cambia rapidamente l’aspetto della sezione. I layout con più immagini funzionano bene quando gli acquirenti devono confrontare i dettagli tra più foto, mentre Slideshow crea una presentazione più raccolta e controllata. None è utile quando volete un layout incentrato sul testo o intendete fare affidamento invece su blocchi separati di immagini e video.

Il comportamento dell’immagine della variante determina come risponde la galleria quando gli acquirenti selezionano una variante diversa. Default mantiene i media collegati alla variante selezionata, None lascia la galleria invariata e Variant only crea un’esperienza più focalizzata mostrando solo le immagini della variante selezionata.

Consiglio

Gli aggiornamenti della galleria basati sulla variante funzionano meglio quando la sezione include anche un blocco Variant selector.

I controlli di zoom e video perfezionano l’esperienza di navigazione. Usate lo zoom lightbox quando i dettagli dell’immagine contano, e usate l’autoplay con moderazione, così il movimento supporta il prodotto invece di distrarre dal percorso di acquisto.

Impostazioni della presentazione

Queste impostazioni si applicano quando la galleria usa un layout a presentazione. Potete controllare la visibilità delle slide, lo stile e la velocità dell’animazione, il comportamento dell’autoplay, il loop e la visualizzazione della navigazione o della paginazione.

Le impostazioni delle colonne della presentazione su desktop e mobile influenzano quanta parte della slide successiva è visibile. Valori più piccoli danno una sensazione più simile a un carosello tradizionale a singola slide, mentre valori più grandi suggeriscono che sono disponibili più media.

L’animazione di dissolvenza crea una presentazione più calma e editoriale, ma impone anche un layout a singola slide e nasconde gli stili di paginazione che dipendono dal movimento tra più slide. Usate lo stile di animazione predefinito quando volete una galleria più interattiva.

Tipi di blocco supportati

1. App
2. Accordion
3. Buy buttons
4. Benefits
5. Button
6. Contact form
7. Complementary products
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

Indicazioni sui blocchi

Blocchi principali di acquisto del prodotto

Questi blocchi creano il flusso di acquisto principale in questa sezione:

1. Title per il nome del prodotto e le azioni facoltative di condivisione o stampa.
2. Price per il prezzo e i messaggi facoltativi sulle policy.
3. Description per la descrizione principale del prodotto, inclusa un’opzione espandibile per testi più lunghi.
4. Variant selector per la selezione delle opzioni come taglia o colore.
5. Quantity selector per i controlli di quantità e i messaggi relativi alle scorte.
6. Buy buttons per l’aggiunta al carrello e le azioni di acquisto correlate.

Una pila predefinita efficace è Title, Price, Description, Variant selector, Quantity selector e Buy buttons. Partite da qui, poi aggiungete blocchi di supporto solo quando aiutano gli acquirenti a decidere più rapidamente.

Selettore varianti

Il blocco Variant selector controlla come gli acquirenti scelgono le opzioni del prodotto. Consultate la Selettore varianti.

Usate i menu a discesa quando volete un layout compatto. Usate pill o swatch quando l’opzione è visiva o quando conta un confronto più rapido.

Se abilitate swatch colore o immagine, assicuratevi che i nomi delle opzioni corrispondano ai nomi reali delle opzioni della variante. Gli swatch immagine sostituiscono gli swatch colore quando entrambi sono configurati per la stessa opzione.

Pulsanti di acquisto

Il blocco Buy buttons aggiunge la principale azione di acquisto. Consultate la Pulsanti di acquisto.

Mantenete l’area focalizzata. Pulsanti di checkout aggiuntivi, dettagli di ritiro, messaggi di spedizione, icone di pagamento e messaggi sulle rate possono essere utili, ma troppi elementi extra attorno al pulsante di aggiunta al carrello possono indebolire l’azione principale.

Prodotti complementari

Il blocco Complementary products mostra articoli correlati che si abbinano bene al prodotto in evidenza. Consultate la Prodotti complementari.

Funziona meglio per componenti aggiuntivi, accessori, ricariche o cross-sell abituali. Potete presentare gli articoli in una griglia o in una presentazione e adattare il layout della scheda per farlo combaciare con la pagina.

Nota

Questo blocco richiede che i consigli sui prodotti complementari siano configurati in Search & Discovery e non mostrerà articoli esauriti o prodotti già aggiunti al carrello.

Blocchi di contenuto di supporto

Usate i blocchi di supporto per rispondere alle obiezioni, aggiungere credibilità o dare più contesto al prodotto.

1. Accordion per FAQ, materiali, dettagli sulla cura, informazioni sulla spedizione o riepiloghi delle policy. Consultate la documentazione Company XYZ sul blocco Accordion.
2. Benefits e Icon with text per punti di valore rapidi come garanzie, vantaggi di consegna o punti salienti del prodotto.
3. Testimonial per la riprova sociale vicino ai controlli di acquisto.
4. Image e Video per media aggiuntivi al di fuori della galleria principale.
5. Button, Rich text, Heading e Separator per una struttura personalizzata della pagina.

Blocchi avanzati e di utilità

Alcuni blocchi sono migliori se riservati a casi d’uso specifici:

1. App per funzionalità del prodotto basate su app.
2. Custom liquid per output personalizzati avanzati o integrazioni.
3. Contact form per flussi di richiesta consulenziale, ordini personalizzati o pre-vendita.
4. Social media icons per link alla community del brand vicino al prodotto.

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto questa sezione. Usate spaziatura più stretta quando questa feature prodotto si trova in una landing page densa, e aggiungete più spazio quando deve risaltare come area di conversione principale.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione vi permettono di aggiungere un colore, un gradiente, un’immagine o un video dietro l’intera sezione. Questo è utile quando volete che la feature prodotto sembri una fascia hero o un’area promozionale chiaramente separata.

Fate attenzione agli sfondi molto dettagliati dietro gallerie di prodotto affollate. Un forte contrasto e uno spazio adeguato contano di più man mano che il layout diventa più visivo.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea divisoria superiore o inferiore alla sezione. Usatele per separare questa feature prodotto dal contenuto circostante senza aggiungere un altro elemento di design completo.

Impostazioni di visibilità

Impostazioni di visibilità controllano se la sezione appare su desktop, mobile o entrambi. Questo è particolarmente utile quando volete layout di feature prodotto diversi per schermi di dimensioni diverse.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza massima del contenuto e la larghezza esterna della sezione. Queste impostazioni influenzano in modo evidente il bilanciamento della galleria, la leggibilità del testo e quanto risulta spaziosa l’area di acquisto.

L’anteprima dell’editor può far sembrare i cambiamenti di larghezza più contenuti di quanto appaiano nella pagina pubblicata, quindi controllate la vetrina reale prima di finalizzare il layout.

Note sull’uso

1. Costruite prima il percorso di acquisto. Iniziate con Title, Price, Variant selector, Quantity selector e Buy buttons prima di aggiungere contenuti extra.
2. Abbinate la galleria al prodotto. Usate layout con più immagini per prodotti ricchi di dettagli e presentazioni per presentazioni più raccolte e controllate.
3. Mantenete chiaro il comportamento delle varianti. Se le varianti hanno immagini distinte, abbinate il Variant selector a un’impostazione della galleria che renda evidenti queste differenze visive.
4. Usate i blocchi di supporto per ridurre le esitazioni. Aggiungete accordion, benefits, testimonial o complementary products quando aiutano gli acquirenti a prendere più rapidamente la decisione successiva.
5. Rivedete con attenzione il layout mobile. Questa sezione si compatta in un’esperienza a colonna singola su schermi più piccoli, quindi controllate l’ordine dei media, la lunghezza del contenuto e la prominenza dei pulsanti prima di pubblicare.
6. Controllate sia lo stato con slide sia quello senza slide. Quando aggiungete blocchi o cambiate lo stile della galleria, la sezione può passare da un semplice layout prodotto a un’esperienza più orientata ai contenuti o guidata dal carosello.
7. Trattate i consigli come condizionali. I contenuti dei prodotti complementari dipendono da un contesto prodotto adatto e dai consigli disponibili, quindi lasciate spazio affinché il blocco possa essere assente senza compromettere il layout.
8. Confrontate separatamente desktop e mobile. Layout, allineamento, visibilità dei media e controlli della presentazione possono comportarsi in modo diverso tra i breakpoint, quindi confermate entrambe le viste prima di pubblicare.
9. Usate in modo intenzionale gli override visivi espliciti. Valori vuoti o in stile predefinito di solito mantengono lo styling di fallback del tema, mentre colori personalizzati, gradienti o media separati per desktop e mobile rendono la sezione più autonoma.