Riuscito
Prodotto
Metti in evidenza un prodotto con controlli flessibili per stile, colore e visibilità della scheda.
Usi questo blocco per mostrare una singola scheda prodotto ovunque tu voglia evidenziare un elemento specifico. Può ereditare lo stile della scheda prodotto del tuo tema oppure sostituirlo qui quando questa scheda necessita di un layout o di un trattamento visivo propri. Per una panoramica più ampia sul funzionamento dei blocchi nell’editor del tema, consulta la documentazione Shopify sulle sezioni e i blocchi
Selezione del prodotto
Sezione intitolata “Selezione del prodotto”Scegli il prodotto che questo blocco deve visualizzare. Il resto delle impostazioni del blocco definisce l’aspetto di quel prodotto, quindi questo blocco funziona meglio quando il prodotto selezionato ha già un’immagine in evidenza forte e un testo prodotto chiaro.
Impostazioni standard del blocco
Sezione intitolata “Impostazioni standard del blocco”Impostazioni scheda
Sezione intitolata “Impostazioni scheda”Queste impostazioni controllano il layout della scheda, il ritaglio dell’immagine, la presentazione del testo, il trattamento del pulsante e la visualizzazione delle varianti. Lasciale su Usa impostazione tema quando vuoi che questo blocco corrisponda alle altre schede prodotto, oppure sostituiscile quando questo prodotto necessita di un’enfasi diversa.
Lo stile della scheda è la scelta visiva più importante. Gli stili Banner si adattano a posizionamenti promozionali più ampi, mentre gli stili più semplici sono in genere più facili da inserire in layout più stretti o righe di contenuti misti.
I rapporti dell’immagine per desktop e mobile possono essere impostati separatamente. Se la scheda appare equilibrata su desktop ma l’immagine viene ritagliata in modo poco armonioso su schermi più piccoli, regola il rapporto per mobile invece di modificare lo stile complessivo della scheda.
Lo stile del pulsante cambia quanto risulta evidente l’azione di acquisto. Su mobile viene usato un trattamento con sola icona, quindi l’immagine del prodotto e il testo dovrebbero rendere comunque la scheda comprensibile senza fare affidamento su un’etichetta lunga del pulsante.
Le impostazioni del testo ti permettono di semplificare la scheda quando lo spazio è limitato. I posizionamenti più ampi possono supportare sia titolo sia estratto, mentre i posizionamenti più piccoli spesso funzionano meglio con testo solo titolo.
L’allineamento verticale centrale del testo funziona solo con lo stile di scheda Banner.
I selettori di variante possono rendere la scheda più utile per prodotti con opzioni significative, ma solo quando tali opzioni sono configurate chiaramente e sono facili da capire direttamente dalla scheda.
Per un comportamento condiviso più ampio, consulta la riferimento alle impostazioni delle schede prodotto.
Impostazioni colore
Sezione intitolata “Impostazioni colore”Queste impostazioni sostituiscono i colori della scheda solo per questo blocco. Usale quando vuoi che un prodotto in evidenza si distingua oppure quando lo sfondo della pagina circostante necessita di un trattamento diverso della scheda per un contrasto migliore.
Le impostazioni dell’overlay Banner si applicano solo allo stile di scheda Banner. Sono utili quando le immagini del prodotto sono affollate e devi migliorare la leggibilità del testo senza sostituire l’immagine.
I colori di sfondo, bordo, intestazione e testo è meglio regolarli insieme. In genere questo produce un risultato più pulito rispetto al modificare un singolo colore in modo isolato.
Per il comportamento condiviso dei colori delle schede, consulta la riferimento alle impostazioni delle schede.
Impostazioni di visibilità
Sezione intitolata “Impostazioni di visibilità”Usa i controlli di visibilità per mostrare questo blocco ovunque oppure nasconderlo su desktop o mobile. Questo è utile quando vuoi una versione della scheda prodotto in evidenza per gli schermi più grandi e una versione più semplice o con ritaglio diverso per quelli più piccoli.
Per ulteriori informazioni sul controllo della visualizzazione, consulta la riferimento alle impostazioni di visibilità.
Impostazioni dell’editor
Sezione intitolata “Impostazioni dell’editor”Usa il titolo dell’editor per etichettare chiaramente il blocco nella barra laterale. Questo è particolarmente utile quando un layout include più blocchi prodotto e vuoi identificare rapidamente ciascuno durante la modifica.
Note sull’uso
Sezione intitolata “Note sull’uso”- Scegli un prodotto forte. Scegli un prodotto con un’immagine in evidenza chiara e un testo di supporto conciso, così la scheda risulta leggibile a colpo d’occhio.
- Usa un prodotto che abbia ancora senso se l’immagine viene ritagliata in modo più stretto su schermi più piccoli.
- Mantieni leggibile l’immagine principale del prodotto se prevedi di sostituire i colori della scheda o aggiungere un overlay.
- Abbina le sostituzioni al compito. Lascia inalterate le impostazioni condivise della scheda quando vuoi coerenza e sostituiscile solo quando questo prodotto in evidenza necessita di un ruolo visivo più forte.
- I valori vuoti o con stile predefinito in genere preservano lo stile di fallback.
- Colori espliciti o scelte media rendono questa scheda più indipendente dal resto del layout.
- Rivedi separatamente la versione mobile. Controlla il ritaglio dell’immagine, la lunghezza del testo e la chiarezza del pulsante su schermi più piccoli prima di finalizzare il blocco.
- I controlli mobile possono modificare allineamento, visibilità e comportamento dei media rispetto al desktop.
- Se i media desktop e mobile sono diversi, rivedi entrambe le viste per confermare che la scheda resti chiara.
- Usa le varianti solo quando è utile. Mostra swatch o pill solo quando migliorano direttamente la selezione del prodotto dalla scheda.
- Verifica con attenzione il contrasto. Quando sostituisci colori o overlay, assicurati che il testo del prodotto resti facile da leggere su immagini e dispositivi diversi.