Impostazioni scheda prodotto

Link in evidenza

1. Documentazione Shopify sulla personalizzazione dei temi
2. 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

Queste impostazioni definiscono l’aspetto e il comportamento predefiniti delle schede prodotto in tutto il tema. Usatele per creare un’esperienza di navigazione coerente per griglie di prodotti, elenchi e altre visualizzazioni di prodotto basate su schede, quindi sovrascriverle solo quando un template specifico richiede un approccio diverso. Per una panoramica più ampia della configurazione a livello di tema, vedere documentazione Shopify sulla personalizzazione dei temi

Layout globale della scheda

Partite da qui per definire la struttura complessiva delle schede prodotto. Lo stile della scheda, il rapporto dell’immagine, la visualizzazione del testo, l’allineamento e il trattamento del pulsante lavorano insieme per determinare quanto le vostre schede prodotto risultano visive, compatte o ricche di informazioni.

Usate rapporti immagine separati per desktop e mobile per mantenere le schede bilanciate su dimensioni di schermo diverse. Un rapporto coerente è particolarmente utile quando la fotografia dei prodotti varia, perché rende le griglie più pulite e più facili da scansionare.

Le impostazioni del testo controllano quanta informazione compare prima che un cliente apra il prodotto. Mostrare sia il titolo sia l’estratto può favorire la scoperta, mentre i layout con solo titolo in genere funzionano meglio per griglie più dense o cataloghi molto visivi.

Le schede in stile banner mostrano sempre una singola immagine, quindi le impostazioni della presentazione non si applicano. Anche l’allineamento verticale centrale del testo funziona solo con lo stile banner.

Dettagli prodotto e azioni

Questi controlli determinano quali dettagli chiave del prodotto compaiono sulle schede, tra cui prezzo, venditore, badge, azioni di quick-add e selettori delle varianti. Usateli per decidere quanto acquisto può avvenire direttamente dalla scheda rispetto alla pagina prodotto.

Il quick-add è più utile quando i clienti possono acquistare con sicurezza dalla griglia. Se la selezione delle varianti è abilitata e il prodotto è disponibile, la scheda può supportare un flusso di aggiunta al carrello più diretto; in caso contrario, l’azione può invece indirizzare i clienti alla pagina prodotto completa.

I badge della collezione possono evidenziare prodotti selezionati con etichette di merchandising leggere. Funziona bene per promozioni, selezioni curate o gruppi di prodotti che volete che i clienti notino rapidamente.

Impostazioni al passaggio del mouse

I media al passaggio del mouse consentono alle schede prodotto di mostrare una risorsa alternativa quando i clienti ci passano sopra su desktop. È utile per mostrare una seconda angolazione, una vista dettagliata o un altro elemento visivo di supporto senza aggiungere altro testo alla scheda.

Potete scegliere automaticamente una posizione della galleria oppure indicare un metafield quando volete un controllo più preciso sulla risorsa al passaggio del mouse per ogni prodotto. Una configurazione basata su metafield è particolarmente utile quando l’immagine ideale al passaggio del mouse non si trova in modo coerente nella stessa posizione in tutto il catalogo.

I media al passaggio del mouse non funzionano quando lo stile dell’immagine della scheda prodotto è impostato su presentazione.

Impostazioni della presentazione

Se usate schede prodotto in stile presentazione, questo sottogruppo controlla il comportamento di quelle gallerie su desktop e mobile. Potete regolare il numero di slide visibili, lo stile dell’animazione, la velocità, la riproduzione automatica, il ciclo e la navigazione o la paginazione sulla scheda.

Le presentazioni funzionano meglio quando più immagini del prodotto aiutano i clienti a confrontare o valutare gli articoli dalla griglia. Per cataloghi più semplici, una configurazione con una sola immagine è in genere più facile da scansionare e mantiene maggiore attenzione sull’elenco prodotti nel suo insieme.

L’animazione dissolvenza crea una presentazione più semplice, ma impone anche un layout a singola slide e non mostra la paginazione. Se il numero di slide e il feedback di navigazione sono importanti, scegliete uno stile di animazione diverso dalla dissolvenza.

Attenzione

Con lo stile di animazione predefinito, le schede dei prodotti con meno di quattro elementi multimediali non andranno in ciclo, anche se il ciclo è abilitato.

Impostazioni degli swatch colore

Gli swatch colore consentono ai clienti di visualizzare in anteprima le scelte delle varianti direttamente sulla scheda prodotto. Sono più efficaci quando il colore è una decisione di navigazione primaria e la denominazione delle opzioni è coerente tra i prodotti.

Inserite i nomi delle opzioni, non i valori delle opzioni, per le opzioni di variante che devono mostrare gli swatch. Se la denominazione non è coerente, gli swatch potrebbero apparire solo su alcuni prodotti o non apparire affatto.

Le definizioni colore personalizzate sono utili quando la denominazione dei colori va oltre i nomi colore standard o quando volete un controllo più preciso sull’aspetto degli swatch.

Impostazioni degli swatch immagine

Gli swatch immagine sostituiscono i chip colore piatti con miniature collegate alle varianti. È una scelta valida quando la differenza tra le varianti si mostra meglio tramite motivo, texture, finitura o una piccola immagine del prodotto.

Ogni opzione di variante pertinente deve avere un’immagine associata per essere visualizzata correttamente. Se alcune varianti non hanno immagini, questi swatch possono apparire incompleti.

Quando sia gli swatch immagine sia quelli colore sono configurati per lo stesso schema di denominazione delle opzioni, gli swatch immagine hanno la priorità. Nella maggior parte dei casi, è meglio scegliere un solo metodo principale di swatch per ogni tipo di variante.

Impostazioni del bordo degli swatch

I controlli del bordo degli swatch aiutano gli swatch colore e immagine a rimanere visibili su sfondi e immagini diversi. Sono particolarmente utili per swatch chiari, design delle schede a basso contrasto o temi con uno stile dell’interfaccia discreto.

Se lasciate vuoti i colori del bordo, il tema usa invece i colori del bordo del pulsante principale. La variante attiva mantiene sempre uno stato selezionato visibile, così i clienti possono comunque capire quale opzione è attualmente scelta.

Note sull’uso

1. Impostate i valori predefiniti prima di fare eccezioni. Costruite prima qui uno stile globale solido delle schede prodotto, quindi usate le sovrascritture a livello di template solo quando un layout specifico richiede davvero un comportamento diverso. Per indicazioni su come sono organizzate le aree del tema, vedere documentazione Shopify su sezioni e blocchi
2. Scegliete un solo pattern multimediale. Usate immagini singole per una scansione rapida, media al passaggio del mouse per una rapida seconda visualizzazione o presentazioni quando più immagini a livello di scheda migliorano chiaramente la navigazione.
3. Verificate entrambi i breakpoint. Le schede desktop e mobile possono comportarsi in modo diverso, quindi controllate rapporti immagine, allineamento, navigazione e visibilità dei media su entrambe le dimensioni dello schermo prima della pubblicazione.
4. Mantenete chiaro lo stile di fallback. I valori vuoti o con stile predefinito in genere preservano l’aspetto integrato del tema, mentre colori espliciti, gradienti o sovrascritture dei media rendono un’area della scheda prodotto più indipendente.
5. Fate attenzione alle interazioni tra funzionalità. Le schede banner non usano presentazioni, le schede in presentazione non supportano i media al passaggio del mouse e gli swatch immagine sovrascrivono quelli colore quando entrambi puntano alla stessa opzione.