La scheda Design ti dà il controllo completo sull'aspetto della tua announcement bar in tutto il negozio. Dai colori di sfondo e dalla tipografia alle animazioni dei pulsanti, allo stile delle icone e al CSS personalizzato — quasi ogni dettaglio visivo può essere regolato per abbinarsi al tuo brand.

Puoi avviare rapidamente con un modello pronto all'uso oppure personalizzare ogni pixel manualmente. In entrambi i casi, la bar sembrerà una parte naturale della vetrina del tuo negozio 🎨

La maggior parte delle impostazioni relative ai colori include:

• Un Color Picker (selettore colore) per la selezione visiva
• Un Hex Code Input (campo codice esadecimale) per i colori esatti del brand

⚠️ Prima di iniziare

Per configurare le impostazioni di Design:

→ Apri una announcement bar esistente
→ Oppure creane una nuova prima

Quindi fai clic sulla scheda Design all'interno dell'editor.

ℹ️ Alcune opzioni appaiono solo per tipi di bar o configurazioni specifiche. Ad esempio, le animazioni a scorrimento si mostrano solo per le bar Multiple (multiple), e lo stile del coupon appare solo quando viene utilizzato un CTA Coupon (coupon). Questi campi condizionali sono evidenziati di seguito in modo che tu sappia esattamente quando aspettarteli.

🎨 Modello

• Cosa fa: Applica istantaneamente uno stile visivo predefinito alla tua announcement bar.
• Come si usa: Scegli tra oltre 25 modelli per avviare il tuo design senza dover modificare manualmente ogni campo.

Ogni modello precompila:

• Tipo di sfondo, colore e impostazioni del gradiente
• Colori e dimensioni del titolo e del sottotitolo
• Colori del pulsante, colore del testo e raggio degli angoli
• Stile del bordo, dell'icona e del coupon

I modelli disponibili includono: Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy

⚠️ Importante: Selezionare un modello sovrascriverà la maggior parte dei campi di design. Le impostazioni Visibility (visibilità) e Position (posizione, configurate nella scheda Placement) vengono mantenute.

💡 I modelli sono ideali per campagne stagionali. Vuoi un look per il Black Friday? Seleziona il modello Black Friday e personalizzalo da lì.

👀 Visibilità

• Cosa fa: Controlla su quali dispositivi appare la tua announcement bar.
• Opzioni:
• • Desktop and Mobile (desktop e mobile) — Visibile su tutti i dispositivi
  • Only Desktop (solo desktop)
  • Only Mobile (solo mobile)

È utile quando desideri messaggi o layout diversi per gli acquirenti desktop rispetto a quelli mobile.

🖼️ Stile dello sfondo

• Cosa fa: Modifica l'aspetto dello sfondo dell'announcement bar.
• Opzioni disponibili:
• • Single Color (colore singolo) — Un colore di sfondo uniforme
  • Gradient (gradiente) — Due colori miscelati con un angolo personalizzato
  • Patterns (motivi) — Motivi di sfondo decorativi

🎨 Single Color (Colore singolo)

• Scegli un colore utilizzando il Color Picker (selettore colore) o inserisci manualmente un Hex Code (codice esadecimale).

🌈 Gradient (Gradiente)

• Gradient Angle Degree (grado angolo gradiente): Controlla la direzione della miscela (0–360°)
• Initial Color (colore iniziale): Il colore di partenza
• Final Color (colore finale): Il colore finale

💡 Un gradiente sottile può aggiungere profondità senza risultare distraente. Prova angoli a basso contrasto per un look moderno.

✨ Patterns (Motivi)

Selezionare Patterns (motivi) mostra un menu a discesa con oltre 35 opzioni di sfondo integrate:

• Decorativi: Wavy, Sale, Discount, Balloon, Girly, Party, Fresh
• Festivi e stagionali: Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday
• Testurizzati: Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese

ℹ️ I Patterns vengono applicati come stili di sfondo CSS. Alcuni utilizzano CSS puro; altri utilizzano risorse immagine.

📐 Bordi e angoli

Questa sezione controlla la forma e il contorno della bar.

• Bar Corner Radius (px) (raggio angolo bar): Quanto appaiono arrotondati gli angoli della bar
• Bar Padding (px) (padding bar): Spaziatura interna tra i bordi della bar e il suo contenuto
• Border Size (px) (spessore bordo): Spessore del bordo esterno
• Border Color (colore bordo): Il colore del bordo

💡 Un raggio d'angolo di 0 crea una bar rettangolare netta. Valori più alti creano forme più morbide e moderne.

🔤 Tipografia

Questa sezione controlla come appare tutto il testo nell'announcement bar.

📝 Stile del titolo

• Title Size (px) (dimensione titolo): La dimensione del messaggio principale
• Title Color (colore titolo): Il colore del messaggio principale

📄 Stile del sottotitolo

• Subheading Size (px) (dimensione sottotitolo): La dimensione del testo di supporto
• Subheading Color (colore sottotitolo): Il colore del testo di supporto

ℹ️ Il campo sottotitolo è nascosto quando si utilizza il tipo di bar Running (scorrimento), poiché le bar marquee utilizzano tipicamente una sola riga di testo.

🔠 Font

Scegli tra 63 font disponibili, tra cui:

• Font di sistema: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, e altri
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, e molti altri

La prima opzione è Use your theme font (usa il font del tuo tema), che abbina automaticamente la tipografia esistente del tuo negozio.

💡 Per la leggibilità, limitati a 1–2 font per bar. Un font display audace per il titolo e un sans-serif pulito per il sottotitolo funzionano spesso bene.

🔘 Design del pulsante

Questa sezione personalizza il pulsante call-to-action.

ℹ️ Queste impostazioni sono sempre disponibili nella scheda Design. Influenzano la vetrina solo quando il tipo di CTA è impostato su Button (pulsante), Full Bar (barra intera) o Trigger (trigger).

🎨 Colore del pulsante

• Cambia il colore di sfondo del pulsante CTA.

🔤 Dimensione e colore del testo del pulsante

• Size (px) (dimensione): Controlla la dimensione del testo all'interno del pulsante
• Color (colore): Cambia il colore del testo del pulsante

⭕ Raggio angoli e stile del pulsante

Questi due campi sono collegati:

• Corner Radius (px) (raggio angoli): Digita manualmente un valore per controllare l'arrotondamento
• Button Style (stile pulsante): Passa rapidamente tra i preset:
• • Square (quadrato) → imposta il raggio su 0 px
  • Rounded (arrotondato) → imposta il raggio su 10 px
  • Fully Rounded (completamente arrotondato) → imposta il raggio su 30 px

Quando selezioni uno stile preset, il raggio degli angoli si aggiorna automaticamente. Quando digiti un raggio personalizzato, lo stile preset si aggiorna per corrispondere:

• 0–9 px → Square (quadrato)
• 10–29 px → Rounded (arrotondato)
• 30+ px → Fully Rounded (completamente arrotondato)

💪 Spessore font

• Controlla quanto appare grassetto o leggero il testo del pulsante
• Opzioni: Normal, Bold, 100–900

✍️ Stile del font

• Alterna tra: Normal, Italic, Underline

✨ Animazione del pulsante

Aggiunge un'animazione continua al pulsante per farlo risaltare.

Animazioni disponibili: None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip

💡 Animazioni sottili come Bounce o Emitting attirano l'attenzione senza risultare aggressive. Usa Flip o Tada per campagne ad alta urgenza.

🏷️ Design del coupon

Questa sezione personalizza l'aspetto della casella del codice coupon.

ℹ️ Questa sezione appare solo quando:

• Una qualsiasi diapositiva di contenuto utilizza Coupon come tipo di CTA, oppure
• Il tipo di bar è impostato su Email (email)

Impostazioni disponibili

• Coupon Border Style (stile bordo coupon): Dashed, Solid, Dotted, Double, Groove, Ridge, Inset, Outset, o None
• Coupon Border Color (colore bordo coupon): Il colore del contorno della casella coupon
• Coupon Text Color (colore testo coupon): Il colore del testo del codice coupon
• Coupon Background (sfondo coupon): Il colore di sfondo della casella coupon (supporta sfondi trasparenti)

💡 Un bordo tratteggiato con uno sfondo a contrasto è il look classico del coupon. Prova uno sfondo semi-trasparente se vuoi che il motivo o il gradiente della bar si intravedano.

🎆 Animazioni della bar

Transizione bar multiple

Disponibile solo quando il tipo di bar è impostato su Multiple (multipla).

Controlla come le diapositive passano da una all'altra:

• Slide (scorrimento) — Scorre orizzontalmente tra gli annunci
• Fade In (dissolvenza) — Dissolve dolcemente da una diapositiva alla successiva
• Cube (cubo) — Un effetto di rotazione cubica 3D
• Flip (capovolgimento) — Un effetto di transizione a capovolgimento di carta

ℹ️ Questa impostazione si trova nella scheda Design, non nella scheda Content (contenuto).

🎨 Impostazioni icone

🚪 Colore icona di chiusura

• Cambia il colore dell'icona del pulsante di chiusura (dismiss).
• Visibile solo quando l'opzione Close Icon (icona di chiusura) è abilitata nella scheda Content (contenuto).

➡️ Colore icona freccia

• Cambia il colore delle frecce di navigazione.
• Visibile solo quando il tipo di bar è impostato su Multiple (multipla), poiché le frecce vengono utilizzate per navigare tra le diapositive.

👥 Icone del banner (icone social)

Questa sezione definisce lo stile delle icone dei social media che appaiono all'interno della bar.

• Social Icon Size (px) (dimensione icona social): Regola la dimensione dell'icona
• Social Icon Color (colore icona social): Cambia il colore dell'icona
• Social Icon Position (posizione icona social): Posiziona le icone sul lato Left (sinistro) o Right (destro) della bar
• Use Original Social Icon Color (usa colore icona social originale): Quando abilitata, ogni piattaforma mantiene il proprio colore di brand (blu di Facebook, gradiente di Instagram, ecc.) invece di usare il tuo colore personalizzato

ℹ️ Le icone social sono configurate nella scheda Content (contenuto). La scheda Design controlla solo il loro aspetto.

💻 CSS personalizzato (per utenti avanzati)

💡 Funzionalità avanzata: Se hai bisogno di uno stile non disponibile nelle impostazioni standard, puoi scrivere il tuo CSS direttamente nell'editor.

Quando abilitato, viene fornito uno scheletro CSS con classi target predefinite:

• Intero contenitore della bar: .futureblink-announcement-bar
• Testo del titolo: .futureblink-announcement-bar .title
• Testo del sottotitolo: .futureblink-announcement-bar .subheading
• Titolo mobile: .futureblink-announcement-bar.mobile .title
• Sottotitolo mobile: .futureblink-announcement-bar.mobile .subheading
• Pulsante CTA: .futureblink-announcement-bar .cta-button
• Pulsante CTA mobile: .futureblink-announcement-bar.mobile .cta-button
• Pulsante di chiusura: .futureblink-announcement-bar .close-btn
• Frecce di navigazione: .futureblink-announcement-bar .arrow
• Pulsanti precedente/successivo: .futureblink-announcement-bar .button-prev e .button-next

Come funziona il CSS personalizzato nella vetrina:

• Tutti i selettori sono automaticamente limitati alla tua announcement bar specifica
• Ogni dichiarazione riceve priorità !important per sovrascrivere gli stili del tema
• I selettori mobile (.mobile) sono automaticamente racchiusi in una media query mobile
• Il CSS viene iniettato come tag <style> quando la bar viene renderizzata

⚠️ Nota: Il CSS personalizzato è potente ma può entrare in conflitto con gli stili del tema. Testa accuratamente sia su desktop che su mobile dopo aver applicato le modifiche.

🛒 Design del checkout

Disponibile solo per le announcement bar posizionate nella Checkout Page (pagina di checkout, richiede Shopify Plus).

Quando la scheda Placement (posizionamento) è impostata su Checkout Page (pagina di checkout), l'intera scheda Design viene sostituita da un pannello semplificato:

• Checkout Title Size (dimensione titolo checkout) — Extra Small, Small, Base, Medium, Large, Extra Large
• Checkout Title Color (colore titolo checkout) — Blue, Dull Grey, Black, Green, Yellow, Red
• Checkout Subheading Size (dimensione sottotitolo checkout) — Stesse opzioni di dimensione
• Checkout Subheading Color (colore sottotitolo checkout) — Stesse opzioni di colore

ℹ️ Il design del checkout utilizza i token nativi di tono di Shopify per uno stile coerente all'interno dell'ambiente di checkout. Gradienti, motivi, pulsanti e CSS personalizzato non sono disponibili nelle bar di checkout.

🚀 Risultato finale

Una volta configurato correttamente, le impostazioni di Design & Styling (design e stile) ti aiutano a creare una announcement bar visivamente coerente e professionale che sembra una parte naturale del tuo negozio.

Con uno stile appropriato:

✅ La bar si allinea ai colori e alla tipografia del tuo brand
✅ I messaggi importanti diventano più evidenti e leggibili
✅ Pulsanti e CTA risaltano senza risultare invasivi
✅ Motivi e gradienti di sfondo aggiungono personalità visiva
✅ Le transizioni tra diapositive risultano fluide e curate
✅ Le esperienze mobile e desktop sono ottimizzate in modo indipendente
✅ Gli utenti avanzati possono estendere lo stile con CSS personalizzato

Utilizzare efficacemente queste opzioni di design e stile garantisce che ogni announcement bar appaia intenzionale, coerente con il brand e facile con cui i clienti possano interagire ✨

Aggiornato il: 01/09/2026