Riuscito
Impostazioni scheda prodotto
Perfezioni stile, immagini, testo, pulsanti e campioni delle schede prodotto per griglie di prodotti più pulite.
Usi queste impostazioni per perfezionare l’aspetto delle schede prodotto ovunque venga usato questo pattern di scheda condiviso. Può mantenere le schede allineate ai valori predefiniti del suo tema oppure sostituirli quando un elenco prodotti specifico richiede una presentazione diversa. Per un contesto più ampio su come queste impostazioni si inseriscono nell’editor del tema, veda documentazione Shopify sull’editor del tema
Impostazioni scheda
Sezione intitolata “Impostazioni scheda”Questo gruppo controlla l’aspetto generale e la densità di informazioni delle schede prodotto. È particolarmente utile quando desidera modificare quanto le schede prodotto risultano visive, compatte o orientate all’azione, senza cambiare globalmente ogni impostazione relativa alle schede. Per maggiori informazioni su come questi controlli si collegano ai componenti del tema, veda documentazione Shopify su sezioni e blocchi
La pagina di riferimento delle impostazioni scheda include indicazioni aggiuntive su come queste sostituzioni si collegano al comportamento generale del tema: schede prodotto
Stile della scheda
Sezione intitolata “Stile della scheda”Lo stile della scheda modifica la struttura e la spaziatura di ciascuna scheda prodotto. Usi questa impostazione per rendere le schede più editoriali, più compatte o più orientate alla praticità, a seconda della collezione e della qualità delle immagini dei suoi prodotti.
Gli stili più strutturati o con più padding funzionano in genere meglio quando le foto dei prodotti variano per inquadratura o sfondo. Gli stili più compatti possono inserire più prodotti in una riga, ma rendono anche più evidenti le incoerenze.
Se le immagini dei prodotti sono ritagliate in modo incoerente, scelga uno stile con più struttura visiva o più spaziatura per mantenere le griglie dei prodotti dall’aspetto intenzionale.
Rapporto d’aspetto dell’immagine
Sezione intitolata “Rapporto d’aspetto dell’immagine”Può scegliere rapporti immagine separati per desktop e mobile, il che è utile quando un solo ritaglio non funziona bene su entrambe le dimensioni dello schermo. I rapporti fissi in genere creano una griglia più pulita e coerente, soprattutto quando il catalogo include forme di immagine diverse.
I rapporti più larghi possono risultare più editoriali, mentre i rapporti quadrati o verticali spesso rendono le schede prodotto più facili da scansionare. Se le sue fotografie sono già preparate con cura, usare il rapporto predefinito o quello a livello di tema può preservare meglio l’inquadratura prevista.
Stile del pulsante
Sezione intitolata “Stile del pulsante”Questa impostazione controlla quanto risulta evidente l’azione della scheda prodotto. La nasconda per un’esperienza di navigazione più pulita, oppure usi uno stile basato sul testo quando i clienti hanno bisogno di un’indicazione dell’azione più chiara.
Gli stili di pulsante compatti aiutano a mantenere ordinate le griglie dense. Su mobile, l’azione usa uno stile solo icona, quindi si assicuri che la scheda resti chiara e utilizzabile anche quando l’etichetta non è più visibile.
Testo della scheda
Sezione intitolata “Testo della scheda”Il testo della scheda controlla quante informazioni scritte sul prodotto compaiono in ciascuna scheda. Più testo può aiutare a spiegare rapidamente un prodotto, mentre meno testo crea un layout più pulito e più orientato alle immagini.
Mostrare sia il titolo sia l’estratto funziona meglio quando il testo di supporto è breve e coerente. Se gli estratti hanno tono o lunghezza irregolari, le schede con solo titolo sono in genere più facili da scansionare.
Allineamento del testo
Sezione intitolata “Allineamento del testo”L’allineamento del testo influisce sia sulla leggibilità sia sul tono visivo. L’allineamento a sinistra è di solito la scelta più chiara per le griglie di prodotti, mentre il testo centrato può risultare più promozionale o più orientato al design.
L’allineamento verticale conta soprattutto nei layout in cui il testo si trova all’interno di una scheda più stilizzata. La posizione centrale si applica solo allo stile della scheda banner, quindi è utile soprattutto per trattamenti di schede prodotto basati su banner.
Selettore variante della scheda
Sezione intitolata “Selettore variante della scheda”Il selettore variante consente ai clienti di visualizzare in anteprima o scegliere le opzioni direttamente dalla scheda prodotto usando campioni o pillole. È particolarmente utile quando colore, motivo o variazioni basate sulle immagini sono una parte importante della decisione d’acquisto.
Se il suo catalogo ha prodotti semplici o una presentazione delle varianti incoerente, nascondere il selettore può mantenere le schede più pulite. Quando abilita campioni o pillole, si assicuri che i dati delle varianti siano configurati in modo coerente, così i clienti avranno un’esperienza affidabile.
Per le indicazioni di configurazione, veda varianti di prodotto
Note sull’uso
Sezione intitolata “Note sull’uso”- Usi le sostituzioni in modo selettivo. Mantenga attive le impostazioni a livello di tema, a meno che un contesto specifico delle schede prodotto non richieda un aspetto o un comportamento diverso.
- Scelga i rapporti per la coerenza. I rapporti immagine fissi aiutano a uniformare fotografie miste, mentre i rapporti predefiniti preservano un’inquadratura più naturale delle immagini.
- Progetti prima per il mobile. Poiché le azioni delle schede prodotto diventano solo icona su mobile, faccia affidamento su immagini forti e testo chiaro per mantenere le schede comprensibili.
- Renda il testo intenzionale. Mostri gli estratti solo quando aggiungono un contesto utile al prodotto; in caso contrario, le schede più semplici basate sul titolo sono di solito più facili da scansionare.
- Abiliti i selettori dove servono. Usi campioni o pillole per i prodotti con scelte visive significative e confermi che la configurazione delle varianti sia coerente prima di distribuirli su larga scala.
- Riveda attentamente le schede in stile slider su entrambe le viewport. Se sceglie una presentazione simile a uno slider, controlli navigazione, paginazione e spaziatura su desktop e mobile, perché il layout può comportarsi in modo diverso rispetto a una griglia statica.
- Controlli con attenzione le scelte separate dei media. Quando desktop e mobile usano ritagli immagine diversi, riveda entrambe le versioni per la leggibilità, l’inquadratura di fallback e qualsiasi ritaglio indesiderato.