Scopri come personalizzare la barra degli annunci nel tuo drawer Upcart, inclusi altezza, posizione, timer per il conto alla rovescia, formattazione del testo e colori.
L’impostazione Height controlla lo spessore della barra degli annunci. Offre tre opzioni: Slim, Normal e Thick. Slim mantiene il drawer più compatto, lasciando spazio al contenuto del carrello — particolarmente utile sugli schermi più piccoli. Normal si colloca a metà strada. Thick offre maggiore enfasi visiva, aiutando il tuo messaggio a risaltare agli occhi dei clienti.
Se vuoi che l’annuncio scada dopo un tempo prestabilito, imposta un conto alla rovescia nel campo Timer duration. Accetta il formato MM:SS — 05:00 per cinque minuti, 00:30 per trenta secondi. I secondi devono essere tra 00 e 59; il campo rifiuta qualsiasi valore superiore.Il conto alla rovescia parte solo se il testo dell’annuncio contiene la variabile del timer. Una volta scaduto, l’intera barra degli annunci viene rimossa automaticamente dal carrello.
Il timer per il conto alla rovescia integrato è basato sulla sessione e conta alla rovescia a partire da un numero di minuti prestabilito. Non supporta conti alla rovescia ricorrenti o giornalieri che si azzerano a un’ora specifica (ad esempio, un conto alla rovescia fino alle 14:00 di ogni giorno). Questa funzionalità non è attualmente disponibile in Upcart.
Questa sezione ti permette di inserire e formattare il messaggio visualizzato nel banner degli annunci. Puoi stilizzare porzioni specifiche del testo usando la barra di formattazione sopra il campo di inserimento, che include opzioni per grassetto, corsivo, sottolineato e colore.
Il campo Announcement Text non supporta i collegamenti ipertestuali — non c’è alcun pulsante per link o URL nella barra di formattazione, e i tag <a> o i link Markdown incollati vengono rimossi al salvataggio. Per rendere l’annuncio cliccabile o includere un link, usa invece il modulo Custom HTML (vedi sotto).
Poiché il campo Announcement Text integrato non renderizza i collegamenti ipertestuali, puoi sostituire o integrare la barra degli annunci inserendo un link con Custom HTML:
Vai su Upcart > Cart Editor > Settings > Custom HTML.
Imposta HTML Location su Above announcements/rewards (per apparire sopra la barra degli annunci) o Below header/announcements/rewards (per apparire direttamente sotto di essa).
Incolla uno snippet con il tuo link, ad esempio:
<div style="text-align: center; padding: 8px;"> <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;"> Shop the sale → </a></div>
Clicca su Save, poi testa nel tuo carrello live.
Per saperne di più sulle posizioni e sullo styling di Custom HTML, consulta Custom HTML e Custom CSS. Il team di supporto di Upcart non scrive né esegue debug di codice personalizzato — rivolgiti a uno Shopify Expert se hai bisogno di aiuto per crearlo.Se usi la funzione conto alla rovescia, inserisci la variabile del timer direttamente nel tuo messaggio. Usa {{timer}} per i carrelli V2 o {TIMER} per i carrelli V1.
Assicurati di digitare manualmente la variabile del timer ({{timer}} per V2, {TIMER} per V1) invece di copiarla e incollarla. Questo evita problemi di formattazione nascosti che potrebbero impedire al timer di essere visualizzato correttamente nel tuo carrello live.
Puoi controllare la dimensione del testo dell’annuncio usando lo slider, con opzioni che vanno da 10px a 24px. Questo aiuta a garantire la leggibilità sia su mobile che su desktop.
Background Color ti permette di definire il colore di riempimento complessivo della barra degli annunci. Border Color ti consente di regolare le linee orizzontali sopra e sotto il banner per un aspetto da contenitore stilizzato.
Per funzionalità aggiuntive, è possibile usare JavaScript per personalizzare il timer del conto alla rovescia. Aggiungi il tuo script nella sezione “Scripts (Before Load)” anziché nel modulo Custom HTML. Si tratta di un requisito legato ai tempi di caricamento, non di una restrizione di sicurezza — Custom HTML esegue effettivamente gli script, ma vengono eseguiti troppo tardi per agganciarsi in modo affidabile all’evento di caricamento del carrello. La sezione “Scripts (Before Load)” esegue il tuo codice prima del caricamento del carrello, così le callback come upcartSubscribeCartLoaded vengono attivate correttamente. Codice di esempio:
<script> window.upcartSubscribeCartLoaded(function(event) { // Your countdown timer code here // event.cart contains the cart object with .items[], .total, .currency });</script>
Nota legacy: window.upcartOnCartLoaded funziona ancora ma è deprecato e registra un avviso in console. Usa upcartSubscribeCartLoaded per tutti i nuovi script.Assicurati di testare attentamente il posizionamento e la sintassi del tuo codice. Alcune restrizioni della piattaforma potrebbero comunque influire su come gli script vengono elaborati.
Questa pagina è stata utile?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
