> ## 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). # 🎨 Controversie — Design & Styling > ℹ️ **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 portaoggetti**e **Top/Bottom Bar** posizionamenti, modelli preservare il vostro esistente **formato titolo**♪ **dimensione del timer**e **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 standalone**o **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 atterraggio**e **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 atterraggio**e **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 ✨