Prodotti in evidenza

Link in evidenza

1. Documentazione Shopify sulle sezioni e i 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 prodotto
6. Documentazione Company XYZ sulle varianti di prodotto
7. Documentazione Company XYZ sulle impostazioni del padding della sezione
8. Documentazione Company XYZ sulle impostazioni degli sfondi della sezione
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 Featured products per mettere in evidenza un insieme specifico di articoli in qualsiasi punto della pagina. È la soluzione ideale per selezioni curate come nuovi arrivi, scelte stagionali, guide ai regali o richiami di campagna, quando desidera avere il pieno controllo sui prodotti mostrati. Per una panoramica più ampia sul funzionamento di sezioni e blocchi, consulti documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

Inizi selezionando i prodotti che desidera mettere in evidenza. Poiché questa sezione è curata manualmente, funziona al meglio quando vuole un mix di prodotti intenzionale anziché un feed che cambia automaticamente.

Consiglio

Usi questa sezione quando la lineup esatta dei prodotti è importante. Se desidera che i prodotti si aggiornino automaticamente man mano che cambia una collezione, usi invece una sezione basata su collezione.

Impostazioni di layout

Le impostazioni di layout controllano quanti schede prodotto compaiono su desktop, tablet e mobile e se ogni dispositivo usa un layout a griglia o a presentazione. Questo le offre molta flessibilità quando desidera righe facili da confrontare su schermi più grandi e una navigazione con swipe su quelli più piccoli. Per i dettagli sui controlli di layout, consulti documentazione di Company XYZ sulle impostazioni di layout.

Le colonne per tablet possono seguire l’impostazione desktop quando il valore del tablet è lasciato a 0. È utile quando desidera un layout coerente per schermi grandi senza dover gestire un conteggio separato per tablet.

Scelga il numero di colonne in base a quanto dettaglio del prodotto deve contenere ogni scheda. Un numero inferiore di colonne offre più spazio alle immagini, ai titoli e alle azioni del prodotto, mentre un numero maggiore crea un layout di merchandising più denso.

Se mostra più dettagli della scheda, eviti di spingere troppo in alto il numero di colonne. I layout densi possono rendere più difficile scansionare le informazioni e le azioni del prodotto, soprattutto su tablet e mobile.

Impostazioni della presentazione

Le impostazioni della presentazione controllano movimento, riproduzione automatica, ciclo continuo, navigazione, impaginazione e comportamento dell’anteprima delle slide ogni volta che il layout di presentazione è abilitato su un dispositivo. Queste impostazioni sono più utili quando desidera un’esperienza di navigazione più guidata rispetto a una griglia prodotto fissa. Per i dettagli sui controlli della presentazione, consulti documentazione di Company XYZ sui controlli della presentazione.

Lo stile dell’animazione è il principale punto decisionale. Fade crea una presentazione più pulita, con un elemento alla volta, mentre l’animazione predefinita è migliore quando desidera visualizzare più prodotti all’interno dello stesso flusso del carosello.

La riproduzione automatica può aggiungere movimento, ma non deve accelerare la scoperta dei prodotti. Un ritardo di autoplay più lento in genere funziona meglio quando le schede includono titoli dei prodotti, estratti o opzioni di variante.

La navigazione e la paginazione aiutano gli utenti a capire quanto contenuto è disponibile. L’anteprima della slide successiva può rendere il carosello più interattivo, ma non è disponibile con l’animazione fade.

L’animazione fade impone un layout a singola slide e nasconde alcune funzionalità della presentazione, come paginazione e anteprime delle slide. Usi l’animazione predefinita quando desidera un carosello multi-scheda più tradizionale.

Impostazioni colore scheda

Usi queste impostazioni per sovrascrivere i colori delle schede solo per questa sezione. Sono utili quando i prodotti in evidenza devono avere un aspetto specifico per una campagna senza modificare le schede prodotto nel resto del negozio.

Le impostazioni di overlay del banner si applicano solo quando lo stile della scheda è impostato su Banner. Per altri stili di scheda, si concentri su sfondo, bordo, titoli e colori del testo per mantenere i dettagli del prodotto chiari e leggibili.

Attenzione

Dopo aver modificato sfondi o overlay delle schede, controlli il contrasto di titoli e testo con immagini di prodotto diverse, in modo che le schede restino facili da leggere.

Impostazioni colore

Queste impostazioni controllano i colori di icona, titolo e sottotitolo a livello di sezione. Usi queste impostazioni quando il contenuto introduttivo deve corrispondere a una palette di campagna o distinguersi dallo stile predefinito del testo.

Se usa anche un’immagine, un gradiente o un video come sfondo della sezione, riveda questi colori del testo dopo aver impostato lo sfondo. Un contrasto che sembra adeguato su uno sfondo semplice potrebbe non reggere una volta aggiunti contenuti multimediali.

Impostazioni standard della sezione

Impostazioni dell’header

Usi i controlli condivisi dell’header per aggiungere struttura e contesto con un’icona facoltativa, una didascalia, un titolo, testo di supporto e un pulsante. Questo può migliorare la chiarezza e aiutare il gruppo di prodotti a sembrare più intenzionale, soprattutto in layout editoriali o promozionali. Per i dettagli sui controlli dell’header, consulti Impostazioni dell’header.

Il pulsante dell’header può trovarsi sopra o sotto il testo, con posizionamento separato su mobile e un trattamento mobile opzionale a larghezza intera. Mantenga il pulsante focalizzato su un unico prossimo passaggio chiaro, come la visualizzazione di una gamma di prodotti più ampia.

Impostazioni scheda

Usi i controlli condivisi della scheda per sovrascrivere solo in questa sezione la presentazione predefinita della scheda prodotto. Può regolare stile della scheda, rapporto immagine, densità del testo, trattamento del pulsante, allineamento del testo e comportamento del selettore di varianti. Per i dettagli sulle schede prodotto, consulti documentazione di Company XYZ sulle schede prodotto.

Questo è il punto principale in cui bilanciare merchandising visivo e dettaglio del prodotto. Se la sezione è guidata dalle immagini, semplifichi testo e azioni; se la sezione è guidata dal confronto, mantenga titoli e call to action coerenti e facili da scansionare.

La visualizzazione del selettore di varianti richiede una configurazione aggiuntiva per funzionare correttamente. Per i dettagli sulla configurazione, consulti documentazione di Company XYZ sulle varianti di prodotto.

Impostazioni di padding

Usi i controlli condivisi di padding per regolare lo spazio sopra e sotto la sezione su desktop e mobile. Per i dettagli sui controlli di padding, consulti documentazione di Company XYZ sul padding della sezione.

Un padding maggiore può aiutare un gruppo di prodotti in evidenza a sembrare più premium o autonomo, mentre uno spazio più ridotto funziona bene quando questa sezione supporta contenuti vicini. Un padding separato per mobile è utile se schede impilate o layout a presentazione rendono la sezione troppo alta.

Impostazioni dello sfondo sezione

Usi i controlli condivisi dello sfondo per aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione. Per i dettagli sui controlli dello sfondo, consulti documentazione di Company XYZ sugli sfondi della sezione.

I contenuti multimediali di sfondo possono dare alla sezione un aspetto più editoriale, ma influenzano anche la leggibilità. Usi gli overlay con attenzione e verifichi che il testo dell’header e le schede prodotto risaltino ancora chiaramente rispetto allo sfondo.

Impostazioni dei separatori

Usi i controlli condivisi dei separatori per aggiungere un divisore superiore o inferiore attorno alla sezione. Per i dettagli sui controlli dei separatori, consulti documentazione di Company XYZ sui separatori.

I separatori sono utili quando questa sezione si trova tra contenuti visivamente simili e necessita di un confine più chiaro. Li mantenga discreti se le schede o gli sfondi creano già una forte separazione visiva.

Impostazioni di visibilità

Usi i controlli condivisi di visibilità per mostrare o nascondere la sezione in base alla dimensione del dispositivo. Per i dettagli sui controlli di visibilità, consulti documentazione di Company XYZ sulla visibilità.

Questo è utile quando la sua strategia di merchandising differisce in base alla dimensione dello schermo. Se nasconde la sezione in un intervallo di dispositivi, si assicuri che gli stessi prodotti compaiano comunque in un punto appropriato su quel dispositivo.

Impostazioni di larghezza

Usi i controlli condivisi di larghezza per gestire sia la larghezza del contenuto sia la larghezza esterna della sezione. Per i dettagli sui controlli di larghezza, consulti documentazione di Company XYZ sulle larghezze del layout.

La larghezza del contenuto influisce su quanto può espandersi l’area dei prodotti, mentre la larghezza della sezione è più importante quando usa sfondi o desidera che il contenitore esterno si estenda ulteriormente. Le modifiche alla larghezza sono più facili da valutare nella vista della pagina live, dove spaziatura e comportamento da bordo a bordo sono più accurati.

Note sull’uso

1. Curare una storia di prodotto chiara. Scelga prodotti che appartengono insieme per tema, pubblico o caso d’uso, in modo che la sezione appaia intenzionale.
2. Abbini il layout all’obiettivo. Usi le griglie per un confronto più semplice e i layout a presentazione per un’esperienza di navigazione più guidata e adatta allo swipe.
3. Riveda entrambe le viste dispositivo. Desktop e mobile possono differire per layout, allineamento, navigazione e comportamento dei contenuti multimediali, quindi controlli ogni breakpoint dopo aver apportato modifiche.
4. Tratti con attenzione le sovrascritture dei contenuti multimediali. La scelta separata dei contenuti multimediali per desktop e mobile può cambiare ritaglio, caricamento, comportamento di fallback e leggibilità, soprattutto quando sono coinvolti sfondi o overlay.
5. Mantenga proporzionato il contenuto delle schede. Più colonne mostra, più semplice dovrebbe essere ogni scheda per mantenere titoli, prezzi e azioni facili da scansionare.
6. Controlli le azioni di commercio nel contesto. Dettagli del prodotto, varianti selezionate, quantità, disponibilità e azioni del carrello configurate possono influire su ciò che i clienti possono aggiungere o fare dalla sezione.