Impostazioni dell’interfaccia della griglia

Link in evidenza

1. Documentazione Shopify sull’editor del tema
2. Documentazione Company XYZ sulle impostazioni dell’interfaccia della griglia
3. Documentazione Shopify sulle sezioni e i blocchi

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usate queste impostazioni per controllare l’esperienza di navigazione delle pagine basate su griglia. Potete impostare il layout predefinito per schermi più grandi e dispositivi mobili, quindi decidere se i clienti vedono un’interfaccia integrata per cambiare autonomamente le dimensioni della griglia. Per una panoramica più ampia su come sono organizzate le impostazioni del tema, vedete documentazione Shopify sull’editor del tema

Questo gruppo di impostazioni è particolarmente utile nelle pagine in cui i clienti scorrono più elementi in una griglia. Una configurazione efficace vi offre un’impostazione predefinita solida, lasciando comunque spazio a preferenze di navigazione diverse.

Layout predefinito della griglia

Le vostre scelte per la dimensione della griglia su desktop e mobile definiscono la vista iniziale quando una griglia appare per la prima volta. Un layout più denso mostra più elementi alla volta, mentre un layout più ampio offre a ogni card più spazio per immagini, titoli, prezzi e altri dettagli.

Sui schermi più grandi, una griglia più compatta può funzionare bene quando le card sono visivamente semplici e i clienti probabilmente confronteranno rapidamente molti elementi. Una griglia desktop più spaziosa è di solito più facile da consultare quando le card includono nomi più lunghi, badge, swatch o altre informazioni di supporto.

Il mobile merita una decisione a sé. Un layout a colonna singola offre a ogni elemento più attenzione visiva e può migliorare la leggibilità, mentre un layout a due colonne aiuta i clienti a scansionare più rapidamente con meno scorrimento.

Scegliete il layout predefinito in base alla quantità di contenuto presente in თითო ogni card, non solo al numero di elementi che volete rendere visibili. Se le card contengono diverse etichette o testo più lungo, una griglia più densa può sembrare rapidamente affollata.

Controlli della dimensione della griglia

Quando l’interfaccia per la dimensione della griglia è abilitata, i clienti possono passare a un layout che si adatta al proprio stile di navigazione. Questo è utile quando alcuni visitatori vogliono scansionare il maggior numero possibile di elementi, mentre altri preferiscono card più grandi e più facili da leggere.

Se volete una presentazione più curata, potete lasciare l’interfaccia disattivata e affidarvi ai valori predefiniti che avete impostato. Se invece la flessibilità è più importante, attivare il controllo offre ai clienti un modo semplice per adattare la visualizzazione senza modificare il contenuto sottostante.

Per maggiori dettagli su come funziona questa interfaccia nelle griglie supportate, vedete Impostazioni dell’interfaccia della griglia. Per indicazioni correlate sulla configurazione del tema, vedete documentazione Shopify su sezioni e blocchi

Controlli sticky

L’interfaccia sticky mantiene questi controlli disponibili vicino alla parte superiore della pagina mentre i clienti scorrono. Questo può rendere l’esperienza di navigazione più fluida nelle pagine di griglia più lunghe, poiché le persone non devono tornare all’inizio solo per cambiare il layout.

I controlli sticky sono più utili quando le griglie sono lunghe e i cambi di layout sono probabili dopo l’inizio dello scorrimento. Nelle pagine più brevi, o nei layout che mantengono già visibili diversi controlli, un’interfaccia sticky può sembrare superflua.

Consiglio

Usate i controlli sticky quando la scelta del layout fa parte dell’esperienza di navigazione, non solo di una piccola comodità. Se è improbabile che i clienti cambino visualizzazione, una configurazione più semplice e non sticky spesso appare più pulita.

Note sull’uso

1. Partite dal contenuto delle card. Scegliete la densità della griglia in base a quanto testo e dettagli di supporto ogni card deve mostrare chiaramente.
2. Ottimizzate il mobile separatamente. Impostate il valore predefinito per il mobile in funzione della leggibilità su schermi piccoli, invece di replicare la preferenza desktop.
3. Esaminate entrambe le viewport. I controlli per desktop e mobile possono influire in modo diverso su layout, allineamento, visibilità e visualizzazione dei media, quindi verificate ogni dimensione dello schermo prima di pubblicare.
4. Fate attenzione alle differenze nell’anteprima. L’anteprima dell’editor può rendere disponibile una griglia prima che esistano contenuti live, quindi confermate il risultato finale con contenuti reali, quando possibile.
5. Aspettatevi che il comportamento del cursore cambi. Se la griglia è presentata come un layout in stile slider, navigazione, paginazione, anteprima e comportamento dei breakpoint possono differire rispetto a una griglia statica o a un layout impilato.
6. Mantenete intatto lo stile di fallback. Lasciate vuoti i valori o usate lo stile predefinito quando volete che l’area circostante mantenga il suo aspetto integrato; usate colori espliciti, gradienti o sostituzioni dei media solo quando volete che l’area della griglia risalti di più.