Collezione

Link in evidenza

1. Documentazione di Company XYZ sulle impostazioni dell’interfaccia della griglia
2. Documentazione di Shopify sulla personalizzazione delle sezioni
3. Documentazione di Company XYZ sui filtri
4. Documentazione di Shopify sulle sezioni e i blocchi
5. Documentazione di Company XYZ sul blocco banner della collezione
6. Documentazione di Company XYZ sulle impostazioni delle intestazioni
7. Documentazione di Company XYZ sulle impostazioni delle schede prodotto
8. Documentazione di Company XYZ sulle impostazioni del padding della sezione
9. Documentazione di Company XYZ sulle impostazioni degli sfondi della sezione
10. Documentazione di Company XYZ sulle impostazioni dei separatori
11. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify: come ottimizzare il negozio per aumentare le conversioni

Video Shopify: come ottimizzare il negozio per aumentare le conversioni

Usate questa sezione per trasformare la collezione corrente in una griglia prodotti flessibile con controlli di navigazione, opzioni di visualizzazione delle schede e banner promozionali opzionali all’interno della griglia. È particolarmente adatta alle pagine collezione in cui i clienti devono scorrere rapidamente i prodotti, affinare i risultati e individuare contenuti in evidenza senza lasciare l’elenco.

Impostazioni principali

Questa sezione attinge sempre alla collezione attiva. La prima scelta importante è come gestire i prodotti non disponibili, perché influisce sia sulla chiarezza della navigazione sia sulla visibilità dei prodotti.

Nascondere i prodotti non disponibili mantiene la griglia concentrata su ciò che può essere acquistato subito. Spostarli in fondo è spesso una scelta migliore quando i riassortimenti sono frequenti o quando volete comunque che i clienti scoprano l’intera gamma.

Se i clienti aspettano regolarmente i riassortimenti, mostrare i prodotti non disponibili in fondo di solito funziona meglio che nasconderli completamente.

Impostazioni dell’interfaccia della griglia

Queste impostazioni controllano il layout predefinito della griglia su desktop e mobile, oltre a stabilire se i clienti possono regolare la griglia autonomamente. Scopri di più nelle impostazioni dell’interfaccia della griglia.

Scegliete il numero predefinito di colonne in base allo spazio visivo richiesto da ciascun prodotto. Le schede più grandi sono migliori per prodotti centrati sulle immagini, mentre le griglie più dense aiutano i cataloghi ampi a risultare più rapidi da consultare.

Attivare l’interfaccia per la dimensione della griglia offre agli acquirenti più controllo sul modo in cui navigano. L’interfaccia sticky mantiene questi controlli visibili mentre i clienti scorrono, il che è particolarmente utile nelle pagine collezione lunghe. Per una panoramica più ampia del comportamento della sezione nell’editor, consultate la documentazione Shopify sulla personalizzazione delle sezioni

Consiglio

Usate una griglia predefinita più ampia quando i dettagli dei prodotti dipendono molto da fotografia, texture o packaging.

Impostazioni dei filtri

Queste impostazioni aggiungono controlli di filtro e ordinamento per aiutare i clienti a restringere e riordinare i risultati. I filtri richiedono una configurazione aggiuntiva prima di diventare utili, ed è disponibile la guida alla configurazione dei filtri del tema.

Attivate i filtri quando una collezione è abbastanza ampia da trarre vantaggio dal restringimento in base ad attributi condivisi. Per collezioni più piccole o molto curate, i filtri possono aggiungere più interfaccia che valore.

Il filtro disponibilità funziona meglio quando lo stato delle scorte è importante per il modo in cui i clienti acquistano. L’ordinamento è una scelta predefinita valida per la maggior parte delle collezioni, ma tenere i filtri aperti per impostazione predefinita è più utile quando è probabile che il raffinamento venga usato subito.

Nota

L’ordinamento potrebbe non comportarsi normalmente nell’anteprima dell’editor, quindi controllate l’anteprima della pagina prima di finalizzare la configurazione. Per ulteriori informazioni sul comportamento dell’editor, consultate la documentazione Shopify su sezioni e blocchi

Impostazioni colore

Queste sovrascritture colore specifiche della sezione si applicano ai contenuti dell’header della sezione stessa, come l’icona, il testo e il sottotitolo. Usatele quando questa pagina collezione necessita di un aspetto distinto senza modificare i colori più ampi del tema.

Mantenete le sovrascritture intenzionali e facili da leggere. Se usate anche uno sfondo personalizzato della sezione, controllate attentamente il contrasto in modo che i contenuti dell’heading restino chiari.

Tipi di blocco supportati

1. Banner della collezione

Banner della collezione

Usate i blocchi Banner della collezione per inserire contenuti promozionali direttamente nella griglia prodotti. Scopri di più sul blocco Banner della collezione.

Questo blocco funziona bene per lanci, campagne stagionali, selezioni curate o messaggi specifici della collezione. Potete aggiungere fino a due banner, ma verrà visualizzato solo un banner per ciascuna dimensione.

La visibilità del banner dipende dalla dimensione della collezione. Un banner grande richiede almeno 6 prodotti e un banner piccolo richiede almeno 11 prodotti.

Se la collezione è troppo piccola per la dimensione del banner selezionata, il banner non apparirà.

Usate con cautela un’immagine di sfondo o un video, in modo che il messaggio promozionale resti leggibile. Un media separato per mobile è utile quando i ritagli desktop non si adattano bene a schermi più piccoli.

I contenuti in primo piano possono includere testo, pulsanti, icone e media di supporto come un logo o un’immagine promozionale. Se scegliete uno stile di link a blocco intero, i link presenti nel testo del sottotitolo verranno rimossi.

Il blocco include anche un proprio controllo di visibilità, utile quando volete che un banner appaia solo su desktop o solo su mobile.

Impostazioni standard della sezione

Impostazioni dell’header

Usate il riferimento alle impostazioni dell’header condiviso. In questa sezione, l’header introduce la collezione con icona, didascalia, heading, testo di supporto e pulsante opzionali.

È un buon punto per aggiungere contesto quando il titolo della collezione da solo è troppo breve. Un pulsante funziona meglio come azione secondaria, ad esempio collegando a una collezione correlata o a una guida all’acquisto utile.

Impostazioni scheda

Usate il riferimento alle impostazioni scheda condiviso. Queste impostazioni sovrascrivono la presentazione predefinita della scheda prodotto per questa sezione, inclusi stile, rapporto immagine, densità del testo, stile della CTA, allineamento e visualizzazione delle varianti.

Usate queste sovrascritture per adattarle al comportamento d’acquisto della collezione. Le categorie visive spesso traggono vantaggio da immagini più forti e meno testo, mentre le categorie tecniche o basate sul confronto in genere richiedono titoli, estratti e indicazioni sulle varianti più chiari.

Alcune impostazioni contano di più con determinati stili di scheda. Ad esempio, l’allineamento verticale centrale si applica completamente solo al layout della scheda in stile banner, e i selettori di varianti funzionano meglio quando i dati delle opzioni prodotto sono già coerenti.

Impostazioni di padding

Usate il riferimento alle impostazioni di padding condiviso. Questi controlli regolano lo spazio sopra e sotto la sezione collezione.

Uno spaziato più ridotto aiuta le pagine ricche di prodotti a risultare più efficienti. Uno spaziato più generoso funziona bene quando l’header della sezione o il trattamento dello sfondo fanno parte della storia visiva.

Impostazioni dello sfondo sezione

Usate il riferimento alle impostazioni dello sfondo sezione condiviso. Queste impostazioni consentono di aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione.

I trattamenti dello sfondo possono rendere una collezione più editoriale o orientata alla campagna, soprattutto se abbinati a colori personalizzati dell’header o della scheda. Poiché possono modificare il peso visivo della pagina, visualizzateli in anteprima su più dimensioni dello schermo prima di pubblicare.

Attenzione

Un media di sfondo troppo affollato può competere con le schede prodotto. Aggiungete abbastanza overlay e contrasto in modo che i prodotti e i contenuti dell’heading rimangano facili da consultare.

Impostazioni dei separatori

Usate il riferimento alle impostazioni dei separatori condiviso. I separatori superiori e inferiori aiutano a definire la sezione quando si trova tra aree di contenuto simili.

Di solito è sufficiente un separatore discreto. Usate stili di linea più marcati solo quando la pagina necessita di confini visivi più chiari.

Impostazioni di larghezza

Usate il riferimento alle impostazioni di larghezza condiviso. Queste impostazioni controllano la larghezza massima dei contenuti e la larghezza esterna della sezione.

Layout più ampi possono mostrare più prodotti per riga e ridurre lo scorrimento. Layout più stretti possono sembrare più curati e rendere i contenuti dell’header più facili da leggere, soprattutto quando sfondi o trattamenti promozionali sono importanti.

L’editor potrebbe non riflettere completamente le modifiche alla larghezza, quindi visualizzate in anteprima la pagina effettiva prima di finalizzare layout a larghezza intera o full-bleed.

Note sull’uso

1. Abbinate la densità della griglia ai prodotti. Usate meno colonne per prodotti centrati sulle immagini e griglie più dense per cataloghi ampi in cui conta una consultazione rapida.
2. Attivate i filtri solo quando sono utili. Il filtraggio aggiunge il massimo valore nelle collezioni ampie con attributi condivisi significativi.
3. Usate le sovrascritture della scheda in modo strategico. Regolate il rapporto immagine, il testo e lo stile della CTA per supportare il modo in cui i clienti confrontano i prodotti in questa collezione.
4. Controllate i requisiti dei banner prima di pubblicare. Assicuratevi che la collezione abbia abbastanza prodotti per la dimensione del banner selezionata, in modo che i blocchi promozionali appaiano effettivamente.
5. Esaminate separatamente desktop e mobile. La densità della griglia, i ritagli dei media e la visibilità dei banner possono variare in base al viewport, quindi confermate entrambi i layout prima di pubblicare.
6. Mantenete leggibili colori e sfondi. I valori in stile predefinito preservano l’aspetto base, mentre le sovrascritture più forti rendono la sezione più autonoma e dovrebbero sempre essere controllate per il contrasto.
7. Visualizzate in anteprima il layout live. Le modifiche alla larghezza, i controlli sticky e i media di sfondo spesso risultano diversi nella pagina effettiva rispetto all’editor.