Banner della collezione

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Company XYZ sul blocco banner della collezione
3. Documentazione Company XYZ sull’uso dei video
4. Google Material Icons
5. Documentazione Company XYZ sulle icone
6. Documentazione Company XYZ sulle impostazioni dei colori del banner
7. Documentazione Shopify sulla personalizzazione delle sezioni
8. Documentazione Company XYZ sulle impostazioni di visibilità

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usate questo blocco per inserire un messaggio promozionale direttamente all’interno della griglia della collezione. Combina media di sfondo, contenuto sovrapposto, immagini opzionali in primo piano e colori personalizzati, così potete creare campagne specifiche per la collezione che si integrano con la navigazione dei prodotti.

Per una panoramica più ampia sul funzionamento dei blocchi del tema, consultate la documentazione Shopify su sezioni e blocchi

Questo blocco appare solo quando la collezione ha abbastanza prodotti da poterlo inserire nella griglia. Un banner grande richiede almeno 6 prodotti, mentre un banner piccolo ne richiede almeno 11.

Potete anche usare la guida fornita dalla fonte per ulteriori dettagli: documentazione Company XYZ sul blocco Banner della collezione.

Impostazioni principali

L’impostazione principale delle dimensioni controlla quanto spazio occupa il banner all’interno della griglia. Poiché viene visualizzato un solo banner per ciascuna dimensione, scegliete la dimensione con attenzione se prevedete di usare più di un banner nella stessa collezione.

Usate un banner Large quando la promozione deve risaltare chiaramente. Usate Small quando volete un momento promozionale più leggero che non competa in modo così forte con le schede dei prodotti.

Sfondo del banner

Questo gruppo controlla i media dietro il contenuto del banner. Potete usare un’immagine o un video, con media mobile separati quando la versione desktop non si ritaglia bene sugli schermi più piccoli.

Se lasciate vuoti i campi dei media mobili, il principale media di sfondo viene riutilizzato. Questo è comodo per configurazioni semplici, ma spesso vale la pena usare asset mobili separati quando testo o punti focali richiedono un’inquadratura più stretta.

Adattamento dell’immagine di sfondo cambia il modo in cui gli sfondi basati su immagini riempiono lo spazio disponibile. Usate un aspetto full-bleed quando l’immagine è soprattutto atmosferica, e un adattamento contenuto quando tutta l’opera deve rimanere visibile.

Consiglio

Se il banner include testo sopra fotografie o video, pianificate in anticipo il contrasto. I media molto ricchi di elementi di solito richiedono un overlay più forte o un contenuto in primo piano più semplice.

Per indicazioni sulla configurazione dei video, consultate la documentazione Company XYZ sull’uso dei video.

Primo piano del banner

Questo gruppo controlla il contenuto sovrapposto allo sfondo, inclusi allineamento, icona, testo e principale invito all’azione. Qualsiasi campo lasciato vuoto resta nascosto, il che rende semplice creare qualsiasi cosa, da un’etichetta minimale a un messaggio promozionale più completo.

L’allineamento orizzontale e verticale vi aiuta a posizionare il contenuto attorno al punto focale dei media di sfondo. Se l’immagine ha già un soggetto forte, posizionate il testo nello spazio libero invece di centrare tutto per impostazione predefinita.

Potete aggiungere un’icona con un’emoji o con un nome di icona supportato per un rapido richiamo visivo. Questa soluzione funziona bene per campagne stagionali, messaggi a tempo limitato o semplici accenti del brand. Le indicazioni sull’icona fornite dalla fonte sono disponibili qui: Google Material Icons e documentazione Company XYZ sulle icone.

Titolo, didascalia e sottotitolo danno il meglio con una gerarchia chiara. Mantenete il titolo conciso, usate la didascalia per un contesto leggero e usate il sottotitolo solo quando il testo aggiuntivo aiuta i clienti a capire la promozione.

Le impostazioni della pulsante controllano destinazione, stile, posizione dell’icona e larghezza su mobile. Se scegliete uno stile di link a blocco intero, il banner stesso diventa il principale elemento cliccabile.

Attenzione

Uno stile di link a blocco intero rimuove i link dal testo del sottotitolo. Usatelo quando volete una sola destinazione chiara per l’intero banner.

Media in primo piano del banner

Questo gruppo aggiunge un’immagine opzionale accanto al contenuto in primo piano. È utile per loghi, ritagli di prodotto, badge o elementi grafici di supporto che devono trovarsi sopra lo sfondo invece di sostituirlo.

Lo stile dell’immagine cambia il trattamento visivo, mentre l’impostazione della larghezza controlla quanto l’immagine risulta dominante nel layout. Le larghezze più piccole di solito funzionano meglio per i loghi, mentre le larghezze maggiori possono supportare grafiche promozionali più marcate.

Potete anche aggiungere un link separato all’immagine in primo piano. Usatelo con attenzione se il banner include già un pulsante o un link a blocco intero, in modo che il blocco continui a risultare prevedibile nell’interazione.

Colori del banner

Queste impostazioni sostituiscono lo stile più ampio del banner solo per questo blocco. Sono utili quando una campagna di collezione richiede una palette distinta, un contrasto più forte o una presentazione più coerente con il brand rispetto allo stile predefinito.

Potete regolare con precisione sfondo, bordo, testo, icona, titolo, sottotitolo e overlay del banner. Il colore del testo generale funge da fallback quando non sono impostati colori del testo più specifici.

Il colore e l’opacità dell’overlay sono particolarmente importanti quando l’immagine o il video di sfondo competono con il messaggio. Un’opacità più bassa rende i media più visibili, ma può ridurre rapidamente la leggibilità.

Per ulteriori informazioni su questi controlli colore condivisi, usate il riferimento fornito dalla fonte: documentazione Company XYZ sulle impostazioni colore del banner.

Impostazioni standard del blocco

Impostazioni di visibilità

Questo gruppo condiviso controlla se il blocco appare su desktop, su mobile o su entrambi. È utile quando volete un mix di merchandising diverso sugli schermi più piccoli o dovete semplificare la griglia su una sola dimensione del dispositivo.

Fate attenzione quando combinate le regole di visibilità con la dimensione del banner e con i requisiti sul numero di prodotti, perché la collezione può apparire diversa tra i dispositivi se il banner è nascosto su una dimensione dello schermo. Per un comportamento più ampio dell’editor, consultate la documentazione Shopify sulla personalizzazione delle sezioni. La guida sulla visibilità fornita dalla fonte è qui: documentazione Company XYZ sulle impostazioni di visibilità.

Note sull’uso

1. Controllate la dimensione della collezione. Se il banner non viene visualizzato, verificate che la collezione abbia abbastanza prodotti per la dimensione di banner selezionata.
2. Mantenete chiara l’azione. Usate una sola destinazione principale ogni volta che è possibile, così il banner è facile da capire e da cliccare.
3. Progettate per il contrasto. Bilanciate media, overlay e colori del testo in modo che il messaggio resti leggibile sia su desktop sia su mobile.
4. Usate media specifici per mobile quando necessario. Sostituite con asset mobili separati quando il ritaglio desktop nasconde contenuti importanti sugli schermi più piccoli.
5. Rivedete entrambe le visualizzazioni. I controlli desktop e mobile possono cambiare allineamento, visibilità e comportamento dei media, quindi controllate il banner in entrambe le dimensioni prima di pubblicarlo.
6. Usate intenzionalmente lo stile di fallback. Lasciate vuoti colori e media quando volete che il blocco erediti l’aspetto circostante, e impostate override espliciti quando il banner deve risultare più autonomo.