> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Come impostare CSS personalizzato per Timer conto alla rovescia e barre > ℹ️ **Note:** Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto. Vuoi che il tuo timer conto alla rovescia o bar corrisponda perfettamente al tuo negozio? 🎨 Mentre l'applicazione include controlli di design estesi, a volte è necessario una maggiore flessibilità per personalizzare dettagli di stile specifici. The **CSS personalizzato** funzione consente di applicare le proprie regole CSS per conteggio timer e barre per la personalizzazione visiva avanzata. Questa guida attraversa tutto ciò che devi sapere sull'aggiunta e la gestione di Custom CSS per i posizionamenti di conto alla rovescia. --- # **⚠️ Prima di iniziare** Prima di utilizzare Custom CSS: * Assicurarsi di aver già creato un timer conto alla rovescia o barra conto alla rovescia. * Assicurarsi di avere accesso al **Design** scheda nell'editor conto alla rovescia. * Avere una comprensione di base di CSS o l'accesso a uno sviluppatore che può aiutare. ⚠️ **Importante:** CSS personalizzato **non disponibile per Checkout**. Perché? Shopify Checkout utilizza un framework di estensione UI sicuro, l'iniezione CSS esterna è limitata da Shopify. CSS personalizzata è completamente supportato su: * Pagine di prodotto * Pagine di atterraggio * I migliori bar * Barra inferiore * Cart Pages * Cassettiera * Posti e-mail --- # **🛠️ Passo 1 — Aprire la scheda di progettazione** Aprire il timer conto alla rovescia o la barra che si desidera personalizzare. Allora: ➡️ Fare clic su **Design** scheda. Scorrere verso il basso fino a trovare il **CSS personalizzato** sezione. 💡 Custom CSS funziona in cima alle impostazioni di progettazione esistenti, modelli, colori e selezioni di tipografia. --- # **🎨 Fase 2 — Aprire la sezione CSS personalizzata** Nella scheda Design: ➡️ Individuare il **CSS personalizzato** Carta. All'interno di questa sezione troverete: * Editor CSS * Un modello di avvio CSS * Anonimo **Applicare** pulsante pulsante Il modello di avviamento include selettori comunemente usati, rendendo più facile iniziare a personalizzare il conto alla rovescia senza dover identificare manualmente i nomi delle classi. --- # **✍️ Passo 3 — Aggiungi il tuo CSS personalizzato** L'editor include diversi selettori pronti all'uso. ### **Selettori disponibili** Selezionatore Descrizione `.futureblink-countdown-timer` Contenitore intero conto alla rovescia `.futureblink-countdown-timer .title` Testo del titolo principale `.futureblink-countdown-timer .subheading` Testo di sottofondo `.futureblink-countdown-timer .cta-button` Pulsante di chiamata a azione `.futureblink-countdown-timer .close-btn` Chiudi icona --- ### **Esempio CSS** Per rendere il titolo audace e cambiare il suo colore: .futureblink-countdown-timer .title { font-weight: 700; colore: #ff6600; # 💡 È inoltre possibile aggiungere i propri selettori, query multimediali, animazioni e regole CSS aggiuntive come necessario. --- # **✅ Passo 4 — Applicare il CSS** Dopo aver inserito il CSS: ➡️ Fare clic **Applicare**. Una volta attivato, il **Applicare** pulsante modifiche a **Ripristino**, indicando che i vostri stili personalizzati sono attivi. ### **Cosa succede automaticamente** L'applicazione esegue automaticamente diverse azioni dietro le quinte: * Inietta la tua CSS nel negozio. * Adds `!important` priorità se necessario. * Scopes stili alla configurazione attuale del conto alla rovescia. * Impedisce lo styling conflitti con altri conto alla rovescia. Questo aiuta a garantire che il CSS funziona costantemente attraverso il tuo negozio. --- # **💾 Fase 5 — Salvare e pubblicare** Dopo aver applicato il CSS: ➡️ Fare clic **Salva**. ➡️ Fare clic **Pubblicazione**. ⚠️ Salvare da solo non aggiorna il negozio. Il conto alla rovescia deve essere pubblicato anche prima che i clienti possano vedere i cambiamenti. --- # **👀 Fase 6 — Verificare le modifiche** Dopo la pubblicazione: ➡️ Apri il tuo negozio. ➡️ Passa alla pagina in cui appare il conto alla rovescia. ➡️ Aggiorna la pagina. Se gli stili aggiornati non appaiono immediatamente, eseguire un aggiornamento difficile: **Windows** `Ctrl + Shift + R` **Mac** `Cmd + Shift + R` Se sono necessari ulteriori aggiustamenti: ➡️ Torna all'editor. ➡️ Aggiorna il CSS. ➡️ Fare clic **Applicare**♪ **Salva**e **Pubblicazione** Ancora. --- # **⚠️ Note importanti** ### **Limitazioni di pagina di controllo** CSS personalizzata non è disponibile sul conto alla rovescia della pagina di controllo perché Shopify's Checkout UI Estensioni operano all'interno di un ambiente sicuro che limita l'iniezione CSS personalizzata. ### **Manipolazione automatica!importante** L'app aggiunge automaticamente `!important` priorità alle dichiarazioni CSS durante il rendering degli stili sul negozio. Se `!important` è già presente, l'applicazione evita di applicarlo due volte. ### **Styling Scoped** Ogni conto alla rovescia riceve il proprio spazio di stile isolato. Questo significa: ✅ Diverse conteggi possono avere disegni diversi. ✅ Gli stili rimangono isolati al conto alla rovescia selezionata. ✅ Altri elementi della pagina rimangono inalterati. ### **Opzione di reset** Fare clic su **Ripristino** rimuove solo la CSS personalizzata. Non colpisce: * Modelli * Colori * Tipografia * Impostazioni di progettazione * Configurazione del conto alla rovescia ### **Visualizza la guida** La sezione CSS personalizzata comprende anche una **Visualizza la guida** link che fornisce ulteriori riferimenti CSS quando necessario. --- # **❓ Risoluzione dei problemi** Se i tuoi stili non appaiono correttamente: ➡️ Verificare che **Applicare** è stato cliccato. ➡️ Confermare il conto alla rovescia **Salvataggio** e **Pubblicato**. ➡️ Controllare che i selettori corrispondono esattamente ai nomi di classe forniti. ➡️ Prova utilizzando una finestra di navigazione Incognito o Private. ➡️ Eseguire un aggiornamento difficile per cancellare stili cache. --- # **🎉 Risultato finale** ✅ Il tuo timer conto alla rovescia o bar riflette i requisiti di stile del tuo marchio. ✅ I conflitti di stile tema sono minimizzati attraverso la gestione automatica della priorità CSS. ✅ I singoli conto alla rovescia possono essere modellati in modo indipendente. ✅ Gli stili personalizzati rimangono isolati senza influenzare altri elementi di vetrina. Custom CSS fornisce un modo flessibile per regolare i disegni di conto alla rovescia mantenendo il resto della configurazione semplice e facile da gestire. 🚀