Elenco collezioni

Link in evidenza

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

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usi questa sezione per mettere in evidenza collezioni selezionate come schede visive che aiutano gli acquirenti a navigare per categoria. Funziona particolarmente bene nelle home page, nelle landing page e nelle campagne in cui vuole guidare le persone verso la parte giusta del suo catalogo.

Impostazioni principali

Inizi selezionando le collezioni che desidera mostrare. Questa sezione è più adatta alla scoperta delle collezioni e alla navigazione per categoria, piuttosto che per evidenziare singoli prodotti scelti manualmente. Per una panoramica più ampia sul funzionamento delle sezioni nell’editor, veda documentazione Shopify sulle sezioni e i blocchi

Impostazioni di layout

Usi i controlli di layout per scegliere quante schede di collezione compaiono su desktop, tablet e mobile, e se ogni dispositivo usa una griglia o una presentazione. Veda impostazioni di layout.

L’impostazione delle colonne per tablet può ereditare il numero di colonne del desktop quando viene lasciata a 0, cosa utile se desidera meno regolazioni specifiche per dispositivo. Se il layout desktop sembra troppo denso su schermi di medie dimensioni, imposti esplicitamente un valore per tablet invece di affidarsi al layout ereditato.

Un layout che appare equilibrato su desktop può risultare affollato su schermi più piccoli. Spesso è meglio ridurre le colonne o passare il mobile a una presentazione per facilitare la navigazione.

Impostazioni della presentazione

Quando un dispositivo usa il layout di presentazione, queste impostazioni controllano il movimento della sezione e il modo in cui gli acquirenti passano da una scheda di collezione all’altra. Veda controlli della presentazione.

L’animazione di dissolvenza crea una presentazione più semplice e più focalizzata, ma limita anche il layout a una sola diapositiva visibile alla volta e non mostra la paginazione. La usi quando desidera un aspetto promozionale più pulito, non quando una scansione rapida tra più collezioni è più importante.

La riproduzione automatica può aggiungere movimento, ma dovrebbe risultare di supporto e non distraente. La pausa al passaggio del mouse è particolarmente utile su desktop, così gli acquirenti possono fermare il movimento mentre decidono dove fare clic.

L’anteprima della diapositiva successiva può rendere la sezione più interattiva, soprattutto sui dispositivi touch. Se desidera un layout più ordinato e contenuto, disattivi questa anteprima.

Impostazioni colore scheda

Usi queste impostazioni per sostituire i colori delle schede usati altrove nel tema solo per questa sezione. È utile quando l’elenco delle collezioni richiede un aspetto promozionale più marcato o quando lo sfondo della sezione circostante richiede un contrasto diverso per le schede.

I controlli dell’overlay del banner si applicano solo quando usa lo stile di scheda Banner. Per gli altri stili di scheda, si concentri sui colori di sfondo, bordo, intestazione e testo per mantenere le schede leggibili e visivamente coerenti.

Impostazioni colore

Questi controlli sostituiscono i colori dell’icona, dell’intestazione e del testo di supporto della sezione. Sono più utili quando aggiunge uno sfondo personalizzato alla sezione e ha bisogno che il contenuto dell’header risalti più chiaramente.

Mantenga un forte contrasto del testo sia con lo sfondo della sezione sia con l’area delle schede sottostante. Piccoli aggiustamenti qui possono rendere la sezione più rifinita senza modificare il design delle schede.

Impostazioni standard della sezione

Impostazioni dell’header

Usi le impostazioni dell’header condivise per aggiungere un’introduzione sopra le schede di collezione, inclusi allineamento, heading, didascalia, testo di supporto e un pulsante facoltativo. Veda Impostazioni dell’header.

Questo è un buon punto per spiegare cosa collega le collezioni in evidenza, come la stagionalità, il tipo di prodotto o il pubblico previsto. Se aggiunge un pulsante, lo usi per un passaggio successivo chiaro, come visualizzare tutte le collezioni o aprire una landing page correlata.

Impostazioni scheda

Usi le impostazioni scheda condivise per controllare l’aspetto di ogni scheda di collezione, incluso stile, rapporto dell’immagine, visualizzazione del testo, allineamento e trattamento del pulsante. Veda Impostazioni scheda.

Queste impostazioni sostituiscono i valori predefiniti più ampi del tema solo per questa sezione, cosa utile quando le collezioni in evidenza necessitano di una presentazione diversa dal resto del sito. Le schede Banner sono più scenografiche, mentre gli stili più semplici con padding sono spesso più facili da leggere in griglie ampie.

Nota

L’allineamento verticale del testo influisce sulle schede solo quando è in uso lo stile di scheda Banner.

Impostazioni di padding

Usi le impostazioni di padding condivise per regolare lo spazio sopra e sotto la sezione. Veda Impostazioni di padding.

Un padding maggiore aiuta a far percepire l’elenco delle collezioni come un’area di navigazione distinta, mentre una spaziatura più stretta funziona meglio quando supporta contenuti vicini. Controlli la spaziatura sia su desktop sia su mobile, così la sezione risulta equilibrata nel contesto.

Impostazioni dello sfondo sezione

Usi le impostazioni dello sfondo sezione condivise per aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione. Veda Impostazioni dello sfondo sezione.

Gli sfondi possono rendere la sezione più editoriale o orientata alla campagna, ma influiscono anche sulla leggibilità e sulla percezione della spaziatura. Se usa uno sfondo immagine o video, si assicuri che il testo dell’header abbia ancora contrasto sufficiente e usi overlay quando necessario. Per i dettagli di configurazione a livello di editor, veda documentazione Shopify sulla personalizzazione delle sezioni

Impostazioni dei separatori

Usi le impostazioni dei separatori condivise per aggiungere una linea nella parte superiore o inferiore della sezione. Veda Impostazioni dei separatori.

I separatori sono utili quando questa sezione si trova tra aree di contenuto visivamente simili e ha bisogno di un confine più chiaro. Li mantenga discreti, a meno che non desideri una divisione strutturale più marcata.

Impostazioni di visibilità

Usi le impostazioni di visibilità condivise per controllare se la sezione appare su desktop, mobile o entrambi. Veda Impostazioni di visibilità.

Questo è utile quando desidera versioni separate della sezione per dispositivi diversi, ad esempio una griglia ampia per desktop e un cursore più semplice per mobile. Se crea versioni specifiche per dispositivo, mantenga allineate le collezioni in evidenza e il messaggio.

Impostazioni di larghezza

Usi le impostazioni di larghezza condivise per controllare la larghezza del contenuto della sezione e la larghezza esterna della sezione. Veda Impostazioni di larghezza.

Larghezze maggiori supportano griglie più ampie e più colonne, mentre larghezze minori possono far sembrare più curata una selezione ridotta di collezioni. Se usa uno sfondo, verifichi le modifiche della larghezza sul storefront live perché la cornice dell’editor può far percepire la spaziatura in modo diverso rispetto alla pagina.

Note sull’uso

1. Raggruppi le collezioni con intenzione. Scelga collezioni che condividono un tema chiaro, così la sezione appare curata e non come un elenco.
2. Abbini il layout all’obiettivo. Usi una griglia per confrontare rapidamente più collezioni e una presentazione quando lo spazio è limitato o la navigazione touch è più importante.
3. Mantenga le schede facili da leggere. Overlay forti, colori personalizzati e stili banner funzionano meglio quando il testo resta chiaro sulle immagini delle collezioni.
4. Aggiunga un contesto utile nell’header. Un heading breve e un testo di supporto conciso possono rendere le collezioni in evidenza più facili da capire a colpo d’occhio.
5. Controlli ogni dimensione dello schermo. Colonne, comportamento della presentazione e scelte di larghezza possono risultare molto diversi tra desktop, tablet e mobile.
6. Riveda con attenzione i contenuti multimediali specifici per dispositivo. Immagini separate per desktop e mobile possono modificare ritaglio, caricamento, comportamento di fallback e leggibilità.
7. Tratti i contenuti di navigazione come flusso cliente. Link riordinati, nascosti o visibili solo su mobile possono modificare ciò che gli acquirenti possono raggiungere dalla sezione.