Creare un banner di base

Un banner di base è una barra che crei con elementi di contenuto (titoli, messaggi, pulsanti, conti alla rovescia, immagini) raggruppati in una o più sezioni. L’editor ha due schede: Design (contenuto e stile) e Placement (dove e per chi appare la barra).

1. Apri la pagina Banners

   Nell’amministrazione Shopify, apri l’app Sami Product Labels, fai clic su Extra Features nella barra laterale dell’app, poi passa alla scheda Banners.

   

   Apri Banners dalla barra laterale di Sami Product Labels.

2. Fai clic su Create banners, poi scegli Basic

   Fai clic su Create banners. Nella finestra Select Type, fai clic su Select accanto a Basic, il tipo che supporta uno o più gruppi di contenuto.

   

   Scegli Basic per creare una barra di annunci standard.

   Nota

   Preferisci non partire da zero? Nella pagina Banners usa Featured templates o View all templates per aprire un banner già pronto e modificarlo.

3. Dai un nome al banner

   L’editor a schermo intero si apre sulla scheda Design. Sostituisci New Banner nel campo del nome sopra l’anteprima con un nome di massimo 50 caratteri. Il nome è interno: serve a riconoscere il banner nell’elenco e non viene mai mostrato alla clientela.

   Accanto al nome trovi anche un selettore della lingua, i pulsanti per l’anteprima desktop e mobile e l’interruttore di stato Active / Draft.

   

   La barra degli strumenti sopra l’anteprima contiene nome del banner, lingua, dispositivo dell’anteprima e stato.

4. Crea il contenuto

   In Content, Section 1 elenca gli elementi che compongono la barra. Fai clic su un elemento per modificarne testo e stile, trascina la maniglia a sinistra per riordinarlo oppure usa le icone a destra della riga per nasconderlo, duplicarlo o eliminarlo.

   Fai clic su Add element per aggiungerne uno nuovo:

   Elemento	Cosa aggiunge
   Message	Una riga di testo.
   Heading	Un titolo grande.
   Line break	Uno spazio verticale tra gli elementi.
   Button	Un pulsante di invito all’azione con il suo link.
   Countdown	Un timer con giorni, ore, minuti e secondi.
   Image	Un’immagine o un logo.

   

   Aggiungi, riordina e modifica gli elementi che compongono la barra.

5. (Facoltativo) Aggiungi altri gruppi di contenuto

   Fai clic su Add Group per creare Section 2, Section 3 e così via. Ogni sezione è un messaggio a sé e il banner le mostra a rotazione: i tempi si regolano in Animation nei passaggi successivi.

   Lascia una sola sezione se vuoi un unico messaggio fisso.

6. Personalizza lo stile della barra

   Nel pannello Style:

   • Background Type: scegli Single Color, Gradient Color o Pattern Image, poi imposta il colore o l’immagine.
   • Font Style: imposta carattere, dimensione, spessore e colore del testo.
   • Padding: controlla lo spazio all’interno della barra.

   

   Imposta sfondo, caratteri e spaziatura per l’intera barra.

7. Aggiungi un pulsante di chiusura o rendi la barra cliccabile

   Entrambe le opzioni si trovano nel pannello Button e sono disattivate per impostazione predefinita:

   • Seleziona Include Close Button per inserire una «x» sulla barra, così chi visita il negozio può chiuderla. Compaiono due campi: Color e Hover Color.
   • Seleziona Bar Clickable per trasformare l’intera barra in un link. Compare il campo Link URL: inserisci la destinazione e usa l’interruttore accanto per aprire il link in una nuova scheda.

   

   Attivando ciascuna casella compaiono le relative impostazioni: i colori del pulsante di chiusura o l’URL del link.

8. Imposta i tempi dell’animazione

   Nel pannello Animation, scegli una transizione Horizontal o Vertical, poi imposta i tempi in secondi:

   Campo	Cosa controlla
   Disappear After	Per quanto tempo la barra resta visibile prima di nascondersi.
   Interval Between Bar Display	L’intervallo prima che la barra ricompaia.
   Time For The Bar To Fade In	La durata dell’animazione di dissolvenza in entrata.
   Time Per Group	Per quanto tempo ogni sezione resta visibile prima di passare alla successiva.

   Nota

   Lascia un campo a 0 per disattivare quel comportamento. Per esempio, Disappear After = 0 mantiene la barra visibile finché la persona non la chiude.

9. (Facoltativo) Aggiungi CSS personalizzato

   Apri Advance Section per scrivere il tuo CSS nella casella Custom CSS (Developer Zone). L’elenco CSS reference sotto mostra i selettori disponibili: fai clic su uno per inserirlo.

10. Scegli dove mostrare il banner

    Passa alla scheda Placement e scegli una posizione:

    Posizione	Comportamento
    Top	Sposta in basso il contenuto della pagina.
    Top Sticky	Sposta in basso il contenuto e resta visibile durante lo scorrimento.
    Top Overlay	Si sovrappone alla parte superiore del contenuto della pagina.
    Overlay Sticky	Si sovrappone al contenuto e resta visibile durante lo scorrimento.
    Bottom Sticky	Fissa nella parte inferiore della pagina.
    Custom	Posiziona la barra dove vuoi usando uno shortcode.

    Sotto il selettore della posizione, restringi il pubblico con Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions e Visibility date. Il pannello Shortcode ti fornisce lo snippet da incollare nel tema quando scegli Custom.

    Consulta Configurare le condizioni di visualizzazione per i dettagli su ogni tipo di condizione.

    

    Scegli una posizione, poi aggiungi condizioni per controllare chi vede il banner.

11. Salva e attiva

    Imposta l’interruttore di stato sopra l’anteprima su Active, poi fai clic su Save in alto a destra. Lascialo su Draft per continuare a lavorare senza pubblicare.

    Attenzione

    I banner compaiono nella vetrina solo se l’incorporamento app è attivo nel tema. Consulta Attivare l’app nel tema.

Prossimi passi

• Configurare le condizioni di visualizzazione: imposta regole di targeting dettagliate per il banner.
• Creare un banner a scorrimento infinito: prova invece una barra a scorrimento in stile ticker.

Consiglio

Hai bisogno di assistenza?

Se incontri difficoltà durante questi passaggi, scrivici a [email protected].