ℹ️ 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♪ Salvae 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. 🚀

Aggiornato il: 10/09/2026