Collezione in evidenza

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni del layout
2. Documentazione di Company XYZ sulle impostazioni dei controlli della presentazione
3. Documentazione di Company XYZ sulle impostazioni degli header
4. Documentazione di Company XYZ sulle impostazioni delle schede prodotto
5. Documentazione di Company XYZ sulle impostazioni del padding della sezione
6. Documentazione di Company XYZ sulle impostazioni degli sfondi della sezione
7. Documentazione di Company XYZ sulle impostazioni dei separatori
8. Documentazione di Company XYZ sulle impostazioni di visibilità
9. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout
10. Documentazione di Shopify sulla personalizzazione delle sezioni

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usate questa sezione per mostrare i prodotti di una collezione in una griglia o presentazione, con controllo separato del layout per desktop, tablet e mobile. È una soluzione ideale per righe di prodotti in homepage, evidenziazioni di categorie curate e feature promozionali di collezioni.

Impostazioni standard della sezione

Iniziate selezionando la collezione che desiderate mostrare, quindi scegliete quanti prodotti includere. Impostare il numero di elementi su 0 mostra tutti gli elementi disponibili di quella collezione fino al limite della sezione, il che è utile per le collezioni più piccole ma può rendere la sezione affollata se il contenuto delle card è dettagliato.

Per i dettagli di configurazione nell’editor del tema, consultate documentazione Shopify sulla personalizzazione delle sezioni

Se desiderate una presentazione più essenziale e curata, usate un numero di elementi inferiore e fate sì che la sezione funzioni come anteprima. Quando l’ordine dei prodotti è importante, assicuratevi che la collezione stessa sia organizzata nel modo desiderato prima di usarla qui.

Questa sezione mostra prodotti di una collezione, non un elenco selezionato manualmente. Se avete bisogno di una selezione precisa dei prodotti, usate invece una sezione creata per i prodotti in evidenza.

Impostazioni di layout

Impostazioni di layout controllano quante card prodotto vengono mostrate e se appaiono come griglia o presentazione su ogni dimensione del dispositivo. Questo rende facile creare un layout ampio, adatto al confronto, sugli schermi più grandi e un’esperienza di navigazione più compatta su quelli più piccoli.

Il tablet può ereditare il numero di colonne del desktop se lasciato su 0, il che è utile quando entrambe le viste devono restare allineate. Se passate un dispositivo alla modalità presentazione, verificate quante card restano visibili contemporaneamente in modo che testo, prezzi e immagini dei prodotti restino facili da esaminare.

Una configurazione comune è una griglia a più colonne su desktop e tablet con una presentazione su mobile. Se le card prodotto includono più testo o opzioni di variante, i layout a griglia spesso risultano più chiari rispetto ai caroselli più stretti.

Impostazioni della presentazione

Impostazioni della presentazione si applicano ogni volta che la sezione usa la modalità presentazione su qualsiasi dispositivo. Usatele per controllare stile dell’animazione, velocità, autoplay, navigazione, paginazione, ripetizione e se una parte della slide successiva è visibile.

L’animazione dissolvenza è il punto decisionale principale perché impone una visualizzazione a singola slide. Questo la rende più adatta a mettere in evidenza un prodotto alla volta che a permettere ai clienti di confrontare più prodotti nella stessa riga.

Consiglio

Usate l’animazione predefinita quando volete mostrare più card in una riga scorribile. Usate la dissolvenza quando desiderate una presentazione più focalizzata, con un prodotto alla volta.

L’autoplay può funzionare bene per righe di prodotti semplici e molto visive, ma è meno efficace quando i clienti hanno bisogno di tempo per confrontare i dettagli del prodotto. L’anteprima della slide successiva può aiutare a segnalare che sono disponibili altri prodotti, anche se riduce lo spazio assegnato alla card corrente.

Impostazioni colore

Queste impostazioni sostituiscono i colori dell’header della sezione per l’icona, il testo principale e il sottotitolo. Sono particolarmente utili quando questa sezione si trova su uno sfondo personalizzato o ha bisogno di una separazione visiva più marcata dal contenuto circostante.

Mantenete semplici i colori dell’header se i prodotti stessi devono restare il focus. Se usate anche uno sfondo audace o uno stile di card promozionale, troppi cambi di colore contemporanei possono far sembrare la sezione visivamente affollata.

Impostazioni standard della sezione

Impostazioni dell’header

Impostazioni dell’header controllano il contenuto introduttivo sopra la collezione, inclusi allineamento, icona, didascalia, heading, testo di supporto e un pulsante opzionale. In questa sezione, l’header è utile per inquadrare la collezione con un’etichetta di categoria, un messaggio di campagna o un link per esplorare di più.

Usate il pulsante per un passaggio successivo chiaro, come visualizzare la collezione completa. Mantenete l’etichetta specifica e verificate posizione e larghezza del pulsante su mobile se la sezione presenta già molta attività visiva.

Impostazioni scheda

Impostazioni scheda vi permettono di sostituire la presentazione predefinita della card prodotto solo per questa sezione. Potete regolare stile della card, rapporto dell’immagine, trattamento del testo, stile della call to action, allineamento del testo e comportamento opzionale del selettore di varianti.

Queste sostituzioni sono utili quando questa feature di collezione ha bisogno di uno scopo diverso rispetto alle vostre liste prodotti standard. Ad esempio, una card in stile banner può risultare più promozionale, mentre uno stile più semplice può essere migliore per una scansione e un confronto rapidi.

Nota

Alcune opzioni delle card funzionano meglio insieme. Ad esempio, l’allineamento verticale centrale del testo si applica solo alle card in stile banner, e su mobile il pulsante della card usa un’azione prodotto con sola icona per l’impostazione dello stile della card.

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la sezione su desktop e mobile. In una riga di collezione, lo spazio influisce sul fatto che la sezione sembri una feature autonoma o parte di un flusso di navigazione più denso.

Usate un padding più stretto quando questa sezione si trova tra altre sezioni basate sui prodotti. Aumentate lo spazio quando volete che la collezione sembri più editoriale o visivamente separata.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione vi permettono di aggiungere un colore di sfondo, un gradiente, un’immagine o un video dietro la sezione. Questo può trasformare una semplice riga di prodotti in una feature promozionale più forte, soprattutto se abbinata a un header.

Se usate sfondi con immagine o video, assicuratevi che card prodotto e testo restino facili da leggere. Gli overlay sono particolarmente utili quando lo sfondo ha un forte contrasto o molti dettagli.

Attenzione

Gli sfondi molto marcati possono competere con le immagini dei prodotti. Se i clienti devono fare più fatica per esaminare i prodotti, semplificate lo sfondo o riducetene l’intensità.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea opzionale sopra o sotto la sezione. Sono utili quando desiderate un confine discreto tra questa feature di collezione e il contenuto vicino.

Usate i separatori con parsimonia se la sezione ha già uno sfondo forte o uno stile delle card distintivo. Un semplice divisore è di solito sufficiente per migliorare la struttura senza aggiungere rumore visivo.

Impostazioni di visibilità

Impostazioni di visibilità controllano se la sezione appare su desktop, mobile o entrambi. Questo è utile quando il vostro approccio al merchandising su mobile deve differire in modo significativo dal layout desktop.

Usatelo per layout alternativi intenzionali, non per piccoli ritocchi visivi. Se il contenuto è sostanzialmente lo stesso in entrambe le versioni, di solito è più semplice mantenere una sola sezione reattiva ben ottimizzata.

Impostazioni di larghezza

Impostazioni di larghezza controllano la larghezza massima del contenuto e la larghezza esterna della sezione. In questa sezione, le modifiche alla larghezza influenzano la densità delle card, lo spazio di respiro della presentazione e quanto la collezione risulta prominente sugli schermi più grandi.

Layout più ampi possono supportare più colonne o card prodotto più grandi, mentre layout più stretti possono rendere una collezione curata più focalizzata. Se usate uno sfondo della sezione full-width o full-bleed, visualizzate l’effetto sullo storefront live perché l’inquadratura dell’editor può rendere i cambi di larghezza fuorvianti.

Note sull’uso

1. Abbinate il layout all’obiettivo. Usate una griglia per un confronto semplice tra prodotti e una presentazione per una soluzione più compatta o editoriale.
2. Limitate il numero di prodotti quando serve. Una selezione più piccola crea di solito una riga in evidenza più chiara rispetto alla visualizzazione di ogni elemento disponibile.
3. Usate le sostituzioni delle card con uno scopo preciso. Sostituite lo stile delle card solo quando questa collezione deve sembrare in modo significativo diversa dalle vostre liste prodotti predefinite.
4. Considerate la dissolvenza come una modalità spotlight. La dissolvenza funziona meglio quando volete che i clienti si concentrino su una card prodotto alla volta invece di sfogliare più elementi contemporaneamente.
5. Controllate ogni dimensione del dispositivo. Esaminate insieme numero di colonne, comportamento della presentazione e posizionamento del pulsante dell’header, in modo che la sezione risulti equilibrata su desktop, tablet e mobile.
6. Rivedete insieme scelte di media e colori. Media separati per desktop e mobile, sostituzioni esplicite dei colori e media di sfondo possono cambiare ritaglio, leggibilità e stile di fallback, quindi testate la sezione su entrambe le dimensioni del viewport.
7. Mantenete intenzionale il contenuto di navigazione. Se l’header o i controlli correlati spostano i clienti in menu, drawer o link annidati, assicuratevi che gli elementi riordinati o nascosti non blocchino il percorso che vi aspettate seguano i clienti.
8. Testate le azioni di commerce nel contesto. Selezione del prodotto, scelta della variante, quantità e disponibilità possono cambiare ciò che i clienti possono fare dalla card, quindi verificate il risultato con i prodotti che intendete mettere in evidenza.