Vuoi un controllo completo sull'aspetto della tua barra di annuncio? 🎨

Anche se le impostazioni di design integrate soddisfano la maggior parte delle esigenze di personalizzazione, la funzione Custom CSS (CSS personalizzato) ti consente di perfezionare lo stile oltre le opzioni standard.

È utile per i merchant che desiderano rispettare esattamente le linee guida del proprio brand, regolare la spaziatura, personalizzare la tipografia o risolvere conflitti di stile specifici del tema.

⚠️ Prima di iniziare

Prima di utilizzare Custom CSS (CSS personalizzato):

• Assicurati che la barra di annuncio sia già stata creata.
• Assicurati di avere una conoscenza di base del CSS o l'accesso a uno sviluppatore.
• Tieni presente che Custom CSS (CSS personalizzato) può sovrascrivere le impostazioni di design standard.

ℹ️ La maggior parte dei merchant non ha mai bisogno di Custom CSS (CSS personalizzato). Utilizzalo solo quando le opzioni di design integrate non possono ottenere l'aspetto desiderato.

🛠️ Passaggio 1 — Apri la scheda Design

Apri l'app Hoppy Announcement Bar e vai alla barra di annuncio che desideri personalizzare.

Quindi:

➡️ Fai clic sulla scheda Design.

Scorri verso il basso fino a individuare la sezione Custom CSS (CSS personalizzato).

🎨 Passaggio 2 — Abilita il CSS personalizzato

All'interno della sezione Custom CSS (CSS personalizzato):

➡️ Fai clic su Apply (Applica).

Una volta abilitato, apparirà un editor CSS contenente uno scheletro CSS preconfigurato.

Questo scheletro include tutti i selettori supportati, facilitando il targeting di diversi elementi della barra di annuncio senza dover identificare manualmente i nomi delle classi.

✍️ Passaggio 3 — Aggiungi il tuo CSS personalizzato

L'editor fornisce selettori pronti per i principali elementi della barra di annuncio.

Selettori disponibili

Selettori specifici per dispositivi mobili

Per targetizzare specificamente i dispositivi mobili, utilizza la variante .mobile.

Esempi:

• .futureblink-announcement-bar.mobile .title
• .futureblink-announcement-bar.mobile .cta-button
• .futureblink-announcement-bar.mobile .close-btn

Esempio CSS

Per rendere il titolo in maiuscolo con spaziatura aggiuntiva:

.futureblink-announcement-bar .title {
text-transform: uppercase;
letter-spacing: 2px;
}

Per rendere il pulsante CTA a larghezza piena su dispositivi mobili:

.futureblink-announcement-bar.mobile .cta-button {
width: 100%;
}

💡 Puoi utilizzare qualsiasi proprietà CSS valida all'interno dei selettori forniti.

👀 Passaggio 4 — Anteprima delle modifiche

Dopo aver inserito il tuo CSS:

➡️ Fai clic su Apply (Applica).

L'anteprima live si aggiorna automaticamente, così puoi rivedere immediatamente le tue modifiche.

Se sono necessari aggiustamenti:

➡️ Modifica il CSS direttamente nell'editor.

➡️ Rivedi l'anteprima aggiornata.

⚙️ Come funziona Custom CSS

L'app applica automaticamente un'elaborazione aggiuntiva per garantire che il tuo stile funzioni correttamente.

Iniezione automatica di !important

Tutte le dichiarazioni CSS ricevono automaticamente la priorità !important sullo storefront per impedire che gli stili del tema sovrascrivano le tue modifiche.

Gestione automatica dei dispositivi mobili

I selettori che utilizzano la variante .mobile vengono automaticamente racchiusi all'interno di media query per dispositivi mobili quando vengono renderizzati sul tuo storefront.

Priorità di sovrascrittura del design

Custom CSS (CSS personalizzato) generalmente ha la precedenza sulle impostazioni di design standard configurate altrove nell'app.

💾 Passaggio 5 — Salva e pubblica

Una volta soddisfatto dello stile:

➡️ Fai clic su Save (Salva).

➡️ Fai clic su Publish (Pubblica).

⚠️ Il solo salvataggio non aggiorna il tuo storefront.

È necessario pubblicare anche la configurazione prima che i clienti possano vedere le modifiche.

🔄 Reimposta Custom CSS

Se desideri tornare alle impostazioni di design predefinite:

➡️ Apri la sezione Custom CSS (CSS personalizzato).

➡️ Fai clic su Reset (Reimposta).

Questo rimuove il tuo CSS personalizzato e ripristina il controllo alle impostazioni di design standard.

💡 Suggerimenti utili

Inizia con piccoli passi

Apporta una modifica alla volta, così è più facile identificare cosa influisce ciascuna regola CSS.

Utilizza l'anteprima live

Rivedi sempre le modifiche nell'anteprima prima di pubblicare.

Testa i layout mobili

Anche se il tuo CSS sembra corretto su desktop, verifica l'aspetto anche sui dispositivi mobili.

Conserva un backup

Per personalizzazioni CSS più estese, considera di conservare una copia del tuo codice al di fuori dell'app.

❓ Risoluzione dei problemi

Se il tuo CSS non viene applicato come previsto:

➡️ Verifica che Apply (Applica) sia stato abilitato.

➡️ Conferma che la barra di annuncio sia stata Saved (Salvata) e Published (Pubblicata).

➡️ Verifica attentamente che i nomi dei selettori corrispondano esattamente ai nomi delle classi forniti.

➡️ Esegui il test in una finestra di navigazione in incognito per eliminare i problemi di cache del browser.

Per requisiti di stile avanzati, considera di collaborare con uno sviluppatore Shopify o il team di supporto del tuo tema.

🎉 Risultato finale

✅ La tua barra di annuncio utilizza uno stile completamente personalizzato.

✅ I conflitti con il tema sono ridotti al minimo grazie alla gestione automatica della priorità CSS.

✅ I layout per dispositivi mobili e desktop possono essere stilizzati in modo indipendente.

✅ La barra di annuncio può essere adattata per corrispondere più precisamente all'identità visiva del tuo brand.

Custom CSS (CSS personalizzato) offre la massima flessibilità quando le impostazioni di design standard non sono sufficienti, aiutando a creare un'esperienza di storefront più curata e coerente. 🚀

Aggiornato il: 01/09/2026