Sticky bar
Una sticky bar è una barra fissata nella stessa posizione dello schermo mentre l'utente scorre la pagina, utile per offerte o pulsanti di acquisto.
Cos’è una sticky bar?
Una sticky bar è una barra sottile bloccata in una posizione fissa dello schermo — solitamente in alto o in basso — mentre il resto della pagina scorre. Tecnicamente viene realizzata utilizzando le proprietà CSS position: sticky o position: fixed. In un negozio online serve a mantenere costantemente visibile un messaggio o un invito all’azione, indipendentemente da quanto l’utente sia sceso lungo la pagina.
Perché una sticky bar è importante?
La sticky bar offre uno spazio fisso per mostrare il messaggio che più ti sta a cuore che i clienti leggano: un codice sconto, una soglia per ottenere la spedizione gratuita o una chiara chiamata all’azione (CTA). Poiché segue l’utente durante la navigazione, funziona egregiamente sui dispositivi mobili e sulle pagine di prodotto molto lunghe, dove altrimenti il pulsante d’acquisto scomparirebbe dalla vista. Di contro, occupa spazio visivo sullo schermo e, se caricata in ritardo o senza aver riservato lo spazio necessario, può causare fastidiosi spostamenti di layout (CLS).
Casi d’uso comuni
- Barra degli annunci (announcement bar) posizionata in alto con un codice sconto, una promozione o la soglia per la spedizione gratuita.
- Pulsante d’acquisto fisso (sticky add-to-cart) sui dispositivi mobili, per mantenere il pulsante visibile durante lo scorrimento di lunghe schede prodotto.
- Banner per cookie e consenso bloccato sullo schermo finché l’utente non effettua una scelta.
- Conto alla rovescia o avviso di scorte limitate per aggiungere un senso di urgenza durante una campagna promozionale.
- Barra di ricerca o menu persistente inserito all’interno di un’intestazione fissa (sticky header).
Prospettiva di Shopify
La maggior parte dei temi per la Online Store 2.0 include una sezione integrata per la barra degli annunci e spesso l’opzione “sticky header” (intestazione fissa), ma un pulsante di acquisto fisso o una sticky bar personalizzata richiedono solitamente modifiche al codice del tema o l’uso di un’app. Verifica sempre sia da desktop che da mobile che la barra non vada a coprire contenuti importanti o i pulsanti del carrello e del checkout, e che non generi salti nel layout. Un’alternativa correlata e meno invasiva è lo slide-in, che scivola lateralmente invece di occupare una porzione fissa dello schermo.