Creare un banner a scorrimento infinito

Un banner a scorrimento infinito è una barra il cui contenuto scorre in loop continuo da destra a sinistra, come un ticker di notizie. Usalo per promozioni ripetute, avvisi di spedizione gratuita o brevi annunci che vuoi far notare.

Nota

Un banner a scorrimento infinito ha una sola sezione di contenuto: non esiste l’opzione Add Group. Se ti servono più messaggi che si alternano, usa invece un banner di base.

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 Infinite Scroll

   Fai clic su Create banners. Nella finestra Select Type, fai clic su Select accanto a Infinite Scroll, il tipo che ripete il contenuto del banner all’infinito per un effetto di scorrimento continuo.

   

   Scegli Infinite Scroll per creare una barra in stile ticker.

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 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. Modifica il contenuto a scorrimento

   Section 1 inizia con un solo elemento Description che contiene un testo di esempio come ✨ Free ship on order $40+ ✨. Fai clic su di esso per aprire le impostazioni a destra:

   • Content: un editor di testo formattato con grassetto, corsivo, sottolineato, emoji, allineamento e vista HTML (</>). Il badge della lingua indica quale lingua stai modificando.
   • Text: Size e Color del carattere.
   • Padding e Margin: spaziatura intorno all’elemento, in pixel.

   Fai clic su Add element per aggiungere altri elementi al loop (Message, Heading, Line break, Button, Countdown o Image) e trascina la maniglia a sinistra di una riga per riordinarli.

   

   Modifica l’elemento che scorre sulla barra oppure aggiungine altri alla sequenza.

5. Personalizza lo stile della barra

   Nel pannello Style:

   • Background Type: scegli Single Color, Gradient Color o Pattern Image. I banner a scorrimento infinito usano Pattern Image per impostazione predefinita: usa Change Image per sostituire la texture o Remove per cancellarla.
   • Font Style: imposta carattere, spessore e colore predefinito del testo.
   • Padding: controlla lo spazio all’interno della barra.

   Nota

   Le immagini a motivo devono essere PNG, JPG o SVG, di massimo 5 MB e 512 × 512 px.

6. 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.

7. Imposta velocità di scorrimento e tempi

   Tutti e quattro i campi del pannello Animation sono in secondi:

   Campo	Cosa controlla
   Scroll speed	Quanto dura un loop completo. Un numero più alto significa uno scorrimento più lento.
   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.

   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.

   

   Scroll speed imposta la durata di un loop: aumentala per rallentare il ticker.

8. (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, incluso .samita_banner_groups.infinityScroll, il wrapper usato quando lo scorrimento infinito è attivo. Fai clic su un selettore per inserirlo.

9. 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.

10. 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: controlla dove e per chi appare il banner.
• Creare un banner di base: crea invece una barra di annunci statica o a rotazione.

Consiglio

Hai bisogno di assistenza?

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