ℹ️ 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.

La scheda Design ti dà il controllo completo su come il tuo timer conto alla rovescia guarda sul tuo negozio. Dai colori e font alle animazioni timer e modelli di sfondo, quasi ogni dettaglio visivo può essere personalizzato per abbinare il tuo marchio.

Puoi anche:

• Avviare rapidamente utilizzando modelli pre-made
• O profondamente personalizzare ogni dettaglio visivo manualmente manualmente

Questa guida rompe ogni opzione di progettazione in modo da poter costruire conto alla rovescia che si sentono nativi al tuo negozio ✨

⚠️ Prima di iniziare

Per configurare le impostazioni di progettazione:

→ Aprire una configurazione di timer di conto alla rovescia esistente
→ O creare un nuovo timer conto alla rovescia prima

Quindi navigare verso Design scheda nell'editor conto alla rovescia.

ℹ️ Le opzioni di progettazione disponibili cambiano a seconda di quale tipo di posizionamento Hai selezionato. Ad esempio, i conto alla rovescia della pagina di controllo utilizzano Shopify's sistema di progettazione e offrono molto meno opzioni di personalizzazione.

🎨 Template e visibilità

Questa sezione controlla il punto di partenza visivo generale e la visibilità del dispositivo per il conto alla rovescia.

Modelli pre-made

The Template dropdown consente di applicare istantaneamente uno stile visivo completo. Ci sono 24 modelli integrati tra cui scegliere, tra cui:

• Dawn — Pulito e minimo
• Elettricità — Audace ed energico
• Foresta — Toni naturali della terra
• Neon — luminoso e accattivante
• Minimal — semplicità a strisce
• Mint — Morbido e fresco
• Gomma di bolla — Giocoso e colorato
• E molti altri

Selezionando un modello si compila automaticamente:

• Colori di sfondo o gradienti
• Stili di confine
• Tipografia colori e dimensioni
• Pulsante stile

💡 Se si sceglie un modello e quindi regolare manualmente le impostazioni individuali, le modifiche vengono conservate. La selezione di un nuovo modello in seguito sovrascriverà i valori personalizzati.

ℹ️ Per Pagina del carrello♪ Cassetto portaoggettie Top/Bottom Bar posizionamenti, modelli preservare il vostro esistente formato titolo♪ dimensione del timere dimensione del separatore piuttosto che sovrascriverli.

Visibilità

Controlli su quali dispositivi appare il conto alla rovescia:

• Desktop e Mobile — Visibile ovunque (default)
• Solo Desktop — Nascosto su dispositivi mobili
• Solo mobile — Nascosto sul desktop

Posizione e comportamento appiccicoso

Queste opzioni appaiono solo per Top/Bottom Bar Conto alla rovescia.

• Posizione — Scegli Top o Fondo della pagina
• Sticky — A quanto pare solo quando la posizione è impostata su Top. Quando abilitato, la barra rimane fissata nella parte superiore dello schermo mentre i clienti scorrere.

⏱️ Stile Timer

Questa sezione controlla come vengono visualizzate le cifre del conto alla rovescia.

ℹ️ Questa sezione è non disponibile per Pagina del carrello♪ Cassetto portaoggetti♪ Pagina del carrello standaloneo Pagina di controllo Conto alla rovescia.

Stile disponibili

• Flip orologio — Classic 3D flip animazione per ogni cifra
• Doppio piastrelle — Ogni cifra ottiene la sua mini ribalta piastrelle
• Numeri di plasma — cifre pulite senza scatola di sfondo
• Piastrelle quadrate — Numeri all'interno di scatole quadrate arrotondate
• Cerchio piastrelle — Numeri all'interno di scatole circolari
• Nessuno — nascondere timer — Rimuove completamente le cifre del timer

Timer sfondo colore

Questo colore picker appare solo quando selezioni:

• Flip orologio
• Doppio piastrelle
• Piastrelle quadrate
• Cerchio piastrelle

Lo fa. non apparire per Numeri di plasma o Nessuno.

Per gli stili flip clock, la metà inferiore di ogni tile flip viene automaticamente resa in un'ombra leggermente più leggera del colore selezionato. Questo crea l'effetto flip 3D realistico sul negozio.

🖼️ Contesto

Questa sezione controlla l'aspetto di sfondo del contenitore di conto alla rovescia.

ℹ️ Questa sezione è non disponibile per Pagina di controllo Conto alla rovescia.

Tipi di sfondo

• Colore singolo — Un colore di sfondo solido
• Gradiente — Due colori mescolati ad un angolo di controllo
• Tri gradiente colore — Tre colori mescolati ad un angolo di controllo
• Modelli — overlays di sfondo decorativo

Colore unico

Scegli un colore usando Picker di colore o inserire un Codice Hex direttamente.

Gradiente

Quando selezionato, vengono visualizzati tre campi aggiuntivi:

• Grado di angolo gradiente — Controlla la direzione (0° a 360°)
• Colore iniziale — Il colore di partenza
• Colore finale — Il colore finale

Tri colore Gradiente

Quando selezionato, vengono visualizzati quattro campi aggiuntivi:

• Grado di angolo gradiente
• Colore iniziale
• Colore intermedio — Il colore medio
• Colore finale

Modelli

Quando selezionato, un Modello a discesa appare con 37 opzioni integrate, incluso:

• Piccoli quadrati, grano casuale, puzzle, fiori
• Temi stagionali: compleanno, mongolfiera, carnevale, pasquale, giorno delle madri, giorno del ringraziamento, giorno dei veterani, giorno delle donne
• Vendita-centro: vendita, sconto, tappezzeria, fresco, ondulato
• E più

Alcuni modelli includono sottili sovrapposizioni scure per mantenere il testo leggibile.

📐 Border

Questa sezione controlla il profilo del contenitore di conto alla rovescia.

ℹ️ Questa sezione è non disponibile per Pagina di controllo Conto alla rovescia.

Stile di confine

Scegli tra:

• Nessuno, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset

Campi di frontiera condizionali

I seguenti campi appaiono solo quando lo stile di confine non è "Nessuno":

• Radius di confine (px) — Come arrotondato gli angoli appaiono
• Dimensione del bordo (px) — Spessore della linea di confine
• Colore di confine — Colore del bordo

⚠️ Se si seleziona uno stile di confine mentre la dimensione è ancora impostata a 0, l'app lo imposta automaticamente 2p. così il confine diventa visibile.

📏 Spaziatura

Questa sezione controlla la spaziatura interna ed esterna intorno al conto alla rovescia.

ℹ️ Questa sezione è non disponibile per Pagina di controllo Conto alla rovescia.

Campi disponibili

• In alto (px) — Spazio tra contenuto e bordo superiore
• In basso (px) — Spazio tra il contenuto e il bordo inferiore
• Top esterno (px) — Spazio tra il conto alla rovescia e gli elementi sopra di esso
• Fondo esterno (px) — Spazio tra il conto alla rovescia e gli elementi sotto di esso

💡 Pensa a "inside" come imbottitura e "fuori" come margine. Aumentare la spaziatura esterna aiuta a separare il conto alla rovescia dagli elementi della pagina vicina.

🔤 Tipografia

Questa sezione controlla come appaiono tutti gli elementi di testo. I campi esatti disponibili dipendono dal posizionamento del conto alla rovescia.

ℹ️ Questa sezione è non disponibile per Pagina di controllo Conto alla rovescia.

Font Family

Scegli tra 60+ opzioni di carattere, incluso:

• Usa il tuo carattere tematico — Corrisponde alle tue Shopify tema automaticamente
• Fonti di sistema: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, Impact, and more
• Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, e molti altri

ℹ️ Se si seleziona un Google Font, l'applicazione lo carica automaticamente da Google Fonts sul tuo negozio. I font di sistema e "Utilizza il carattere a tema" non attivano richieste esterne.

Elementi di tipografia per posizionamento

Ogni elemento ha il suo Dimensioni (px) e Colore campi:

Pagina del prodotto, Pagina di atterraggio e Posizione personalizzata

• Titolo — titolo principale del conto alla rovescia
• Subheading — Messaggio secondario sotto il titolo
• Timer — Il conto alla rovescia si cifra
• Etichette di tempo — The "Days", "Hours", "Minutes", "Seconds" testo
• Messaggio esteso — Mostrato quando il timer è esteso (appare solo se la tua azione finale è impostata su "Extend")

Cart Page e Cart Cassetto

• Titolo — Solitamente contiene {timer} variabile in linea
• Timer — Le cifre del conto alla rovescia dal vivo
• Messaggio esteso — Appare solo se l'azione finale è "Estendere"

ℹ️ I posizionamenti relativi al carrello fanno non mostra le opzioni di tipografia Subheading o Time Labels.

📊 Barra di progresso

Questa sezione personalizza l'indicatore di progresso visivo mostrato sopra o sotto il timer.

ℹ️ Questa sezione è solo disponibile per Pagina del prodotto♪ Pagina di atterraggioe Posizione personalizzata Conto alla rovescia.

Quando appare

La scheda di progettazione di Progress Bar si presenta solo se hai abilitato la barra di avanzamento nella Contenuto Prima scheda.

Se la barra di avanzamento non è abilitata nel contenuto, questa intera scheda è nascosta.

Impostazioni barra di progresso

• Colore dello sfondo — Il colore della porzione non riempita della barra (default: grigio chiaro)
• Colore della barra — Il colore della porzione riempita (default: nero)

Comportamento negozio

La barra di avanzamento è una barra arrotondata alta 8px che riempie proporzionalmente sulla base del tempo rimanente. Si aggiorna ogni secondo con un'animazione di transizione liscia di 1 secondo.

⏸️ Separatore

Questa sezione controlla i caratteri che appaiono tra le unità temporali (tra giorni, ore, minuti e secondi).

Posti non controllati

• Carattere separatore — Scegli tra:
• • : Colonnello
  • - Hyphen
  • . Periodo
  • | Barra verticale
  • / Slitta in avanti
  • Spazio (lavandino)
• Dimensione del separatore (px)
• Colore separatore — Raccoglitore di colore di esagonale

Pagina di controllo

Perché il conto alla rovescia del checkout usa Shopify's Checkout UI Extension framework, lo styling separatore è limitato a Shopify's token predefiniti:

• Dimensione del separatore — extraSmall♪ small♪ base♪ medium♪ large♪ extraLarge
• Colore separatore — accent (blu), subdued (grigio) info (nero), success (verde) warning (giallo) critical (rosso)

🔘 Button Design

Questa sezione personalizza il pulsante call-to-action.

ℹ️ Questa sezione è solo disponibile per Top/Bottom Bar♪ Pagina di atterraggioe Posizione personalizzata Conto alla rovescia.

Stile di animazione del pulsante

Aggiunge un'animazione a loop continuo al pulsante:

• Nessuno — Pulsante statico
• Shake — Stimo laterale delicato
• Pulsante — Effetto ritmico
• Zoom — Espandi e contratti
• Scivolo — movimento scorrevole sottile
• Fase — impulso di capacità
• Spingi — Effetto rotante
• Papà! — rimbalzo rapido
• Blink — Breve effetto lampeggiante

Effetti Hover pulsante

Aggiunge un effetto interattivo quando i clienti saltano sopra il pulsante:

• Nessuno
• Glow — Gradiente bagliore intorno al pulsante
• Blob — Effetto morfo di blob organico
• Impulso del luppolo — Pulse su topo
• Pulsante N° 045 — Uno stile preimpostato numerato
• Pulsante di flusso
• Pulsante destro del mouse
• Smoooo♪ Overleap♪ Collisione
• Bolla di pulsante — Effetto pop della bolla
• Squisito
• Maschera 1♪ Maschera 2♪ Maschera 3
• Gooey Button
• Pulsante 3D — Effetto di profondità tridimensionale

Impostazioni aggiuntive del pulsante

• Colore del pulsante — Colore sfondo del pulsante
• Dimensione del testo del pulsante (px)
• Colore del testo del pulsante
• Radius di confine (px) — Come arrotondato gli angoli del pulsante sono

📝 Progettazione dei messaggi personalizzati

Questa sezione appare solo quando l'azione finale del conto alla rovescia Mostra messaggio personalizzato o Tempo di attesa.

Controlla la tipografia del messaggio che i clienti vedono dopo la fine del timer.

Campi disponibili

• Dimensione del titolo personalizzata (px) + Colore
• Dimensione della sottorubrica personalizzata (px) + Colore

ℹ️ Se l'azione finale include più intervalli di estensione e uno qualsiasi di essi utilizza un messaggio personalizzato, questa scheda diventa visibile.

❌ Chiudi Icona

Questa sezione personalizza il pulsante di dismissione per barre di conto alla rovescia.

ℹ️ Questa sezione è solo disponibile per Top/Bottom Bar Conto alla rovescia.

Prerequisito

L'icona vicina deve prima essere abilitata nel Contenuto scheda utilizzando Chiudi Icona casella di controllo. Se non è abilitato, questa scheda di progettazione non ha effetto.

Colore delle icone

Scegli un colore esagonale per l'icona X. L'icona è posizionata sul lato destro della barra e in posizione verticale.

Comportamento da negozio: Quando un cliente fa clic sull'icona vicina, la barra è nascosta utilizzando lo storage del browser e non riapparirà durante quella sessione.

💻 CSS personalizzato

Per i commercianti che hanno bisogno di styling oltre le opzioni integrate, è possibile scrivere il proprio CSS.

ℹ️ Questa sezione è non disponibile per Pagina di controllo Conto alla rovescia.

Classi di destinazione disponibili

L'editor include un modello predefinito con queste classi di destinazione:

.futureblink-countdown-timer { }
.futureblink-countdown-timer .title { }
.futureblink-countdown-timer .subheading { }
.futureblink-countdown-timer .cta-button { }
.futureblink-countdown-timer .close-btn { }

Come Applicare

1. Inserisci il tuo CSS nell'area di testo
2. Fare clic Applicare
3. Gli stili vengono iniettati automaticamente nel tuo negozio

⚠️ L'app automaticamente aggiunge !important ad ogni proprietà CSS quando applicata, che aiuta a superare i conflitti tematici. Se uno stile non sembra lavorare immediatamente, provare a salvare e rinfrescare il tuo negozio.

📍 Design by Placement

I diversi piazzamenti di conto alla rovescia hanno diverse capacità di progettazione basate su vincoli tecnici.

Pagina del prodotto, Pagina di atterraggio, Posizione personalizzata

Questi posizionamenti offrono il esperienza di progettazione completa:

✅ Tutti i modelli
✅ Tutti gli stili timer (flip, piastrelle, pianura, ecc.)
✅ Opzioni di sfondo complete (single, gradiente, tri-gradient, modelli)
✅ Border, spaziatura, barra di avanzamento
✅ Comandi di tipografia completi
❌ Design dei bottoni — non disponibile per le pagine dei prodotti
✅ CSS personalizzato

Top / Bottom Bar

Opzioni di progettazione quasi complete con alcune aggiunte specifiche di posizionamento:

✅ Posizione (in alto / in basso) e gioco appiccicoso
✅ Design delle icone
✅ Design dei bottoni
✅ Tutti gli stili e gli sfondi del timer
✅ CSS personalizzato
❌ Barra di progresso — non disponibile per barre

Cart Page, Cart Drawer, Cart Page Standalone

layout semplificato focalizzato sulla messaggistica in linea:

✅ Sfondo, bordo, spaziatura, separatore
✅ Tipografia titolo e timer
✅ CSS personalizzato
❌ Stile timer — testo in linea sempre semplice
❌ Barra dei progressi
❌ Design dei bottoni
❌ Subheading e time labels tipografia

Pagina di controllo

Ristretto pesantemente a causa di Shopify Estensioni dell'interfaccia utente:

✅ Dimensione del separatore e colore (solo Token di Polaris)
✅ Taglia titolo e colore (solo Polaris tokens)
✅ Dimensione del timer e colore (solo Polaris tokens)
❌ Modelli
❌ Sfondo, confine, spaziatura
❌ Stili di tempo — testo semplice solo
❌ Barra dei progressi
❌ Pulsante stile
❌ Chiudi icona
❌ CSS personalizzato
❌ Selezione famiglia carattere

⚠️ Note importanti

Modelli Overwrite Valori personalizzati

Quando si seleziona un modello pre-made, sostituisce la maggior parte dei valori di progettazione. Se hai già personalizzato colori e dimensioni manualmente, salva il tuo lavoro prima di sperimentare modelli.

Limitazioni di checkout sono piattaforma-level

Le opzioni di progettazione limitate sulle pagine di checkout sono imposte da Shopify's Checkout UI Extension framework. Questi non sono limitazioni di app — assicurano che il conto alla rovescia rimanga compatibile con ShopifyE' un ambiente sicuro.

Cart Timer sono sempre Plain

I conteggi relativi al carrello rendono il timer come testo in linea normale perché il conto alla rovescia è solitamente incorporato all'interno di una frase utilizzando il {timer} variabile. Gli orologi Flip e gli stili di piastrelle romperebbero visivamente il flusso di frase.

Scala del timer mobile

Su schermi più piccoli di 633px di larghezza, le dimensioni delle cifre del timer vengono ridotte automaticamente (tipicamente del 33% circa) per prevenire il trabocco e mantenere la leggibilità sui dispositivi mobili.

💡 Utilizzare casi e esempi

Minimal Product Page Timer

→ Luogo: Pagina del prodotto
→ Timer Style: Numeri di pianura
→ Sfondo: Colore singolo (bianco o trasparente)
→ Border: Nessuno
→ Tipografia: Piccolo titolo, medio timer, separatore sottile

Annuncio Top Bar Bold

→ Luogo: Top/Bottom Bar
→ Posizione: Top + Sticky
→ Modello: Neon o elettrico
→ Timer Style: orologio Flip o piastrelle quadrate
→ Animazione Pulsante: Pulse
→ Chiudi Icona: Abilitato con colore corrispondente

Vendita di terreni stagionali

→ Luogo: Landing Page
→ Background: Pattern (ad esempio, compleanno, carnevale o tema stagionale)
→ Timer Stile: Cerchio piastrelle
→ Progress Bar: Abilitato con colori di marca
→ Pulsante: angoli arrotondati con effetto bagliore

🎉 Risultato finale

Una volta configurato con successo, le impostazioni di Design & Styling ti aiutano a creare conto alla rovescia che si sentono come una parte naturale del tuo negozio.

✅ Countdowns abbina i colori del tuo marchio e la tipografia
✅ Gli stili timer creano il giusto livello di urgenza visiva
✅ Backgrounds e modelli impostare l'umore per ogni campagna
✅ Pulsanti si distinguono con animazioni e effetti hover
✅ Spacing e bordi danno il vostro conto alla rovescia polish professionale
✅ Custom CSS sblocca la flessibilità di progettazione illimitata
✅ Ogni tipo di posizionamento rispetta i propri vincoli di progettazione

Utilizzando queste opzioni di progettazione assicura correttamente i timer conto alla rovescia guardare intenzionale, professionale e allineato con il resto del vostro negozio ✨

Aggiornato il: 10/09/2026