> ## 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). # 🎨 Countdowns — Design & Styling > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Die Registerkarte Design gibt Ihnen die vollständige Kontrolle darüber, wie Ihr Countdown-Timer auf Ihrer Storefront aussieht. Von Farben und Schriftarten bis hin zu Timer-Animationen und Hintergrundmustern kann fast jedes visuelle Detail an Ihre Marke angepasst werden. Sie können entweder: * Schnell starten mit **vorgefertigte Vorlagen** * Oder tief Customized **jedes visuelle Detail** manuell In diesem Handbuch werden alle Designoptionen zusammengefasst, sodass Sie Countdowns erstellen können, die sich in Ihrem Shop nativ anfühlen ✨ --- # **⚠️ Bevor Sie beginnen** So konfigurieren Sie Design-Einstellungen: → Öffnen Sie eine bestehende Countdown-Timer-Einrichtung Oder erstellen Sie zuerst einen neuen Countdown-Timer Navigieren Sie zum **Design** Tab im Countdown-Editor. ℹ️ Die verfügbaren Gestaltungsmöglichkeiten ändern sich je nachdem, **Platzierungsart** Sie ausgewählt haben. Zum Beispiel, Checkout Page Countdowns verwenden ShopifyDesign-System und bieten weit weniger Anpassungsmöglichkeiten. --- # **🎨 Vorlage und Sichtbarkeit** Dieser Abschnitt steuert den gesamten visuellen Ausgangspunkt und die Gerätesichtbarkeit für Ihren Countdown. --- ## **Vorgefertigte Templates** Die **Meldebogen** Mit Dropdown können Sie sofort einen vollständigen visuellen Stil anwenden. Es gibt **24 eingebaute Vorlagen** zur Auswahl, einschließlich: * **Morgendämmerung** Sauber und minimal * **Elektrisch** — Fett und energetisch * **Wald** — natürliche Erdtöne * **Neon** — Hell und auffällig * **Minimal** Stripped-Back Einfachheit * **Minze** — Weich und frisch * **Blasengummi** — Verspielt und bunt * Und viele weitere Die Auswahl einer Vorlage füllt automatisch aus: * Hintergrundfarben oder -verläufe * Grenzstile * Typografie Farben und Größen * Button Styling 💡 Wenn Sie eine Vorlage auswählen und dann einzelne Einstellungen manuell anpassen, bleiben Ihre Änderungen erhalten. Wenn Sie später eine neue Vorlage auswählen, überschreiben Sie Ihre benutzerdefinierten Werte. ℹ️ für **Warenkorbseite**, **Warenkorbschublade**, und **Top/Bottom Bar** Placements, Templates bewahren Ihre bestehenden **Titelgröße**, **Timergröße**, und **Größe des Separators** Anstatt sie zu überschreiben. --- ## **Sichtbarkeit** Steuert, auf welchen Geräten Ihr Countdown erscheint: * **Desktop und Mobile** Überall sichtbar (Standard) * **Desktop nur** Versteckt auf mobilen Geräten * **Nur mobil** Versteckt auf dem Desktop --- ## **Position & Sticky Behavior** Diese Optionen erscheinen nur für **Top/Bottom Bar** Countdowns. * **Position** — Wählen **oben** oder **Boden** Seite * **klebrig** — erscheint **nur wenn Position auf Top gesetzt ist**Wenn aktiviert, bleibt die Leiste oben auf dem Bildschirm fixiert, während die Kunden scrollen. --- # **⏱️ Timer Stil** Dieser Abschnitt steuert, wie die Countdown-Ziffern selbst angezeigt werden. ℹ️ Dieser Abschnitt ist **nicht verfügbar** für **Warenkorbseite**, **Warenkorbschublade**, **Warenkorbseite Standalone**, oder **Checkout Seite** Countdowns. --- ## **Verfügbare Styles** * **Flip-Uhr** Klassische 3D-Flip-Animation für jede Ziffer * **Doppelkacheln** Jede Ziffer erhält ihre eigene Mini-Flip-Kachel * **Einfache Zahlen** Reine Ziffern ohne Hintergrundbox * **Quadratkacheln** — Zahlen in abgerundeten quadratischen Kästchen * **Kreisfliesen** — Nummern in Rundkästen * **Keine — Zeitgeber verstecken** - Entfernt die Timer-Ziffern vollständig --- ## **Hintergrundfarbe des Timers** Dieser Color Picker erscheint **Nur wenn** Sie wählen: * Flip-Uhr * Doppelkacheln * Quadratkacheln * Kreisfliesen Es tut **nicht** erscheinen für **Einfache Zahlen** oder **Keine**. Bei Flip-Clock-Styles wird die untere Hälfte jeder Flip-Kachel automatisch in einem etwas helleren Farbton Ihrer ausgewählten Farbe dargestellt. Dies erzeugt den realistischen 3D-Flip-Effekt auf der Storefront. --- # **🖼️ Hintergrund** Dieser Abschnitt steuert das Hintergrundbild Ihres Countdown-Containers. ℹ️ Dieser Abschnitt ist **nicht verfügbar** für **Checkout Seite** Countdowns. --- ## **Hintergrundtypen** * **Einzelfarben** Eine solide Hintergrundfarbe * **Gefälle** Zwei Farben in einem Winkel, den Sie kontrollieren * **Trifarbgradient** Drei Farben in einem Winkel gemischt, den Sie kontrollieren * **Muster** Dekorative Hintergrund-Overlays --- ## **Einzelfarben** Wählen Sie eine Farbe mit dem **Farbwähler** oder in eine **Hex-Code** direkt. --- ## **Gefälle** Wenn ausgewählt, erscheinen drei zusätzliche Felder: * **Gradientenwinkelgrad** - Kontrolliert die Richtung (0° bis 360°) * **Ausgangsfarbe** — Die Ausgangsfarbe * **Endgültige Farbe** - Die Endfarbe --- ## **Tri-Farbverlauf** Wenn ausgewählt, erscheinen vier zusätzliche Felder: * **Gradientenwinkelgrad** * **Ausgangsfarbe** * **Zwischenfarbe** - Die mittlere Farbe * **Endgültige Farbe** --- ## **Muster** Wenn ausgewählt, a **Muster** Dropdown erscheint mit **37 eingebaute Optionen**, einschließlich: * Winzige Quadrate, Zufallskorn, Puzzle, Blumen * Saisonale Themen: Geburtstag, Ballon, Karneval, Ostern, Vatertag, Muttertag, Thanksgiving, Veteranentag, Frauentag * Verkauf konzentriert: Verkauf, Rabatt, Polsterung, frisch, wellig * Und mehr Einige Muster enthalten subtile dunkle Overlays, um Text lesbar zu halten. --- # **📐 Grenze** Dieser Abschnitt steuert den Umriss Ihres Countdown-Containers. ℹ️ Dieser Abschnitt ist **nicht verfügbar** für **Checkout Seite** Countdowns. --- ## **Grenzstil** Wählen Sie aus: * Keine, gepunktet, gestrichelt, solide, doppelt, Rillen, Ridge, Inset, Outset --- ## **Bedingte Grenzfelder** Folgende Felder erscheinen **Nur wenn Border Style nicht "None" ist**: * **Grenzradius (px)** Wie abgerundet die Ecken erscheinen * **Randgröße (px)** — Dicke der Grenzlinie * **Randfarbe** - Farbe der Grenze ⚠️ Wenn Sie einen Rahmenstil auswählen, während die Größe immer noch auf 0 eingestellt ist, stellt die App ihn automatisch auf **2px** So wird die Grenze sichtbar. --- # **📏 Abstand** Dieser Abschnitt steuert den internen und externen Abstand um Ihren Countdown herum. ℹ️ Dieser Abschnitt ist **nicht verfügbar** für **Checkout Seite** Countdowns. --- ## **Verfügbare Felder** * **Inside Top (px)** - Raum zwischen Inhalt und oberer Kante * **Innen unten (px)** - Raum zwischen Inhalt und unterer Kante * **Außen oben (px)** - Raum zwischen Countdown und Elementen darüber * **Außen unten (px)** Raum zwischen Countdown und Elementen darunter 💡 Stellen Sie sich "innen" als Polsterung und "außen" als Rand vor. Die Vergrößerung des Außenabstands hilft, den Countdown von benachbarten Seitenelementen zu trennen. --- # **🔤 Typografie** Dieser Abschnitt steuert, wie alle Textelemente erscheinen. Die genauen verfügbaren Felder hängen von Ihrer Countdown-Platzierung ab. ℹ️ Dieser Abschnitt ist **nicht verfügbar** für **Checkout Seite** Countdowns. --- ## **Schriftfamilie** Wählen Sie aus **60+ Schriftarten**, einschließlich: * **Verwenden Sie Ihre Theme Font** - Passt zu Ihrem Shopify Theme automatisch * Systemschriften: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, Impact und mehr * Google Fonts: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script und viele mehr ℹ️ Wenn Sie eine Google Font auswählen, lädt die App diese automatisch von Google Fonts auf Ihre Storefront. Systemfonts und "Use your theme font" lösen keine externen Anfragen aus. --- ## **Typografieelemente nach Platzierung** Jedes Element hat seine eigene **Größe (px)** und **Farbe** Felder: ### **Produktseite, Landing Page und Custom Position** * **Titel** Hauptüberschrift des Countdowns * **Unterrubrik** — Zweitnachricht unter dem Titel * **Timer** Die Countdown-Ziffern selbst * **Zeitangaben** - Der "Tage", "Stunden", "Minuten", "Sekunden" Text * **Erweiterte Nachricht** - Wird angezeigt, wenn der Timer erweitert wird (erscheint nur, wenn Ihre Endaktion auf "Extend" gesetzt ist) ### **Cart Page und Cart Drawer** * **Titel** In der Regel enthält die `{timer}` Inline Variable * **Timer** — Die Live Countdown Ziffern * **Erweiterte Nachricht** - Erscheint nur, wenn die Endaktion "Extend" ist ℹ️ Cart-bezogene Platzierungen **nicht** Unterüberschrift oder Time Labels Typografieoptionen anzeigen. --- # **📊 Progress Bar** Dieser Abschnitt passt den visuellen Fortschrittsindikator an, der über oder unter dem Timer angezeigt wird. ℹ️ Dieser Abschnitt ist **Nur verfügbar** für **Produktseite**, **Landing Page**, und **Zollstelle** Countdowns. --- ## **Wenn es erscheint** Die Progress Bar Designkarte erscheint **Nur wenn** Sie haben den Fortschrittsbalken im **Inhalt** Tab zuerst. Wenn die Fortschrittsleiste im Inhalt nicht aktiviert ist, wird diese gesamte Karte ausgeblendet. --- ## **Progress Bar Einstellungen** * **Hintergrundfarbe** — Die Farbe des ungefüllten Teils des Balkens (Standard: hellgrau) * **Balkenfarbe** — Die Farbe der gefüllten Portion (Standard: schwarz) ### **Storefront Verhalten** Der Fortschrittsbalken ist ein 8px hoher abgerundeter Balken, der sich proportional zur verbleibenden Zeit füllt. Es aktualisiert jede Sekunde mit einer reibungslosen 1-Sekunden-Übergangsanimation. --- # **⏸️ Separator** Dieser Abschnitt steuert die Zeichen, die zwischen Zeiteinheiten (zwischen Tagen, Stunden, Minuten und Sekunden) erscheinen. --- ## **Nicht-Checkout-Platzierungen** * **Trennzeichen** — Wählen Sie aus: * `:` Colon * `-` Hyphen * `.` Zeitraum * `|` Vertikalstab * `/` Schrägstrich * Raum (leer) * **Separatorgröße (px)** * **Separatorfarbe** — Hex Color Picker --- ## **Checkout Seite** Weil Checkout-Countdowns verwendet werden Shopify's Checkout UI Extension Framework, Separator Styling ist begrenzt auf Shopifyvordefinierte Token: * **Größe des Separators** — `extraSmall`, `small`, `base`, `medium`, `large`, `extraLarge` * **Separatorfarbe** — `accent` (blau) `subdued` (grau) `info` (schwarz) `success` (grün) `warning` (gelb) `critical` (rot) --- # **🔘 Knopfdesign** Dieser Abschnitt passt den Call-to-Action-Button an. ℹ️ Dieser Abschnitt ist **Nur verfügbar** für **Top/Bottom Bar**, **Landing Page**, und **Zollstelle** Countdowns. --- ## **Button Animation Style** Fügt eine kontinuierliche Looping-Animation zum Button hinzu: * **Keine** — Statischer Button * **Schütteln** Sanftes Side-to-Side-Shake * **Puls** Rhythmischer Skalierungseffekt * **Zoom** - Erweitert und Verträge * **Schlitten** — Subtile Gleitbewegung * **Fade** — Trübungsimpuls * **Spin** Rotationseffekt * **Pelz** Quick Scale Bounce * **Blink** Kurzer Blitzeffekt --- ## **Button Hover Effekte** Fügt einen interaktiven Effekt hinzu, wenn Kunden über den Button schweben: * **Keine** * **Glühen** Gradientenglühen um den Knopf * **Bohnen** Organischer Blob-Morph-Effekt * **Schwebeimpuls** Pulse auf Mouse-Over * **Knopf N° 045** — Ein nummerierter voreingestellter Stil * **Spülknopf** * **Rechtsknopf wischen** * **Smoosh**, **Überlagerung**, **Kollision** * **Knopfblase** Bubble Pop Effekt * **Squishy** * **Maske 1**, **Maske 2**, **Maske 3** * **Gooey Button** * **3D-Taste** Dreidimensionaler Tiefeneffekt --- ## **Zusätzliche Tasteneinstellungen** * **Knopffarbe** Hintergrundfarbe des Buttons * **Knopf Textgröße (px)** * **Taste Textfarbe** * **Grenzradius (px)** Wie abgerundet die Knopfecken sind --- # **📝 Custom Message Design** Dieser Abschnitt erscheint **Nur wenn** Die Endaktion Ihres Countdowns ist auf **Eigene Meldung anzeigen** oder **Timer verlängern**. Es steuert die Typografie der Nachricht, die Kunden nach dem Ende des Timers sehen. --- ## **Verfügbare Felder** * **Benutzerdefinierte Titelgröße (px)** + **Farbe** * **Maßgeschneiderte Unterpositionsgröße (px)** + **Farbe** ℹ️ Wenn Ihre Endaktion mehrere Verlängerungsintervalle enthält und eine von ihnen eine benutzerdefinierte Nachricht verwendet, wird diese Karte sichtbar. --- # **❌ Close Icon** Dieser Abschnitt passt die Abweisungstaste für Countdown-Balken an. ℹ️ Dieser Abschnitt ist **Nur verfügbar** für **Top/Bottom Bar** Countdowns. --- ## **Voraussetzung** Das Close Icon selbst muss zunächst im **Inhalt** Tab mit dem **Close Icon** Checkbox. Wenn es dort nicht aktiviert ist, hat diese Designkarte keine Wirkung. --- ## **Close Icon Farbe** Wählen Sie eine Hex-Farbe für das X-Symbol. Das Symbol ist am rechten Rand der Leiste positioniert und vertikal zentriert. **Storefront Verhalten:** Wenn ein Kunde auf das Schließsymbol klickt, wird die Leiste über den Browserspeicher ausgeblendet und erscheint während dieser Sitzung nicht wieder. --- # **💻 Custom CSS** Für Händler, die Styling über die eingebauten Optionen hinaus benötigen, können Sie Ihr eigenes CSS schreiben. ℹ️ Dieser Abschnitt ist **nicht verfügbar** für **Checkout Seite** Countdowns. --- ## **Verfügbare Zielklassen** Der Editor enthält eine Standardvorlage mit diesen Zielklassen: `.futureblink-countdown-timer { }` `.futureblink-countdown-timer .title { }` `.futureblink-countdown-timer .subheading { }` `.futureblink-countdown-timer .cta-button { }` `.futureblink-countdown-timer .close-btn { }` --- ## **Wie man anwendet** 1. Geben Sie Ihr CSS im Textbereich ein 2. Klicken **Beantragen** 3. Die Stile werden automatisch in Ihre Storefront injiziert ⚠️ Die App wird automatisch angehängt `!important` auf jede CSS-Eigenschaft, wenn sie angewendet wird, was dazu beiträgt, Themenkonflikte zu überschreiben. Wenn ein Stil nicht sofort zu funktionieren scheint, versuchen Sie, Ihre Storefront zu speichern und zu erfrischen. --- # **📍 Design durch Platzierung** Unterschiedliche Countdown-Platzierungen haben unterschiedliche Designfähigkeiten basierend auf technischen Einschränkungen. --- ## **Produktseite, Landing Page, Custom Position** Diese Placements bieten die **volle Designerfahrung**: ✅ Alle Meldebögen ✅ Alle Timer-Stile (Flip, Kacheln, Plain usw.) ✅ Volle Hintergrundoptionen (Single, Gradient, Trigradient, Muster) ✅ Rand, Abstand, Fortschrittsbalken ✅ Vollständige Typografie-Kontrollen ❌ Button Design — nicht verfügbar für Produktseiten ✅ Custom CSS --- ## **Top / Bottom Bar** Nahezu vollständige Designoptionen mit einigen platzierungsspezifischen Ergänzungen: ✅ Position (oben/unten) und klebriger Kipphebel ✅ Close Icon Design ✅ Knopfgestaltung ✅ Alle Timer Stile und Hintergründe ✅ Custom CSS ❌ Fortschrittsbalken — nicht verfügbar für Bars --- ## **Cart Page, Cart Drawer, Cart Page Standalone** Vereinfachtes Layout mit Fokus auf Inline Messaging: ✅ Hintergrund, Rand, Abstand, Trennlinie ✅ Titel und Timer-Typografie ✅ Custom CSS ❌ Timer-Stil — immer reiner Inline-Text ❌ Fortschrittsbalken ❌ Knopfgestaltung ❌ Unterposition und Zeitetiketten Typografie --- ## **Checkout Seite** stark eingeschränkt durch Shopify Checkout UI Extensions: ✅ Separatorgröße und -farbe (nur Poloris-Token) ✅ Titelgröße und -farbe (nur Poloris-Token) ✅ Timergröße und -farbe (nur Poloris-Token) ❌ Meldebögen ❌ Hintergrund, Grenze, Abstand ❌ Timerstile — nur Klartext ❌ Fortschrittsbalken ❌ Button Styling ❌ Schließsymbol ❌ Custom CSS ❌ Schriftfamilienauswahl --- # **⚠️ Wichtige Hinweise** ## **Vorlagen überschreiben benutzerdefinierte Werte** Wenn Sie eine vorgefertigte Vorlage auswählen, ersetzt sie die meisten Designwerte. Wenn Sie bereits Farben und Größen manuell angepasst haben, speichern Sie Ihre Arbeit, bevor Sie mit Vorlagen experimentieren. --- ## **Checkout-Einschränkungen sind Plattform-Ebene** Die eingeschränkten Gestaltungsoptionen auf den Checkout-Seiten werden von ShopifyCheckout UI Extension Framework. Dies sind keine app-beschränkungen - sie stellen sicher, dass ihr countdown kompatibel bleibt. ShopifySichere Checkout-Umgebung. --- ## **Cart Timer sind immer Plain** Cart-bezogene Countdowns stellen den Timer als reinen Inline-Text dar, da der Countdown normalerweise in einen Satz eingebettet ist. `{timer}` Variable. Flip-Uhren und Kachelstile würden den Satzfluss visuell unterbrechen. --- ## **Mobile Timer-Skalierung** Auf Bildschirmen, die kleiner als 633px sind, werden die Timerzahlen automatisch reduziert (in der Regel um etwa 33%), um Überlauf zu verhindern und die Lesbarkeit auf mobilen Geräten aufrechtzuerhalten. --- # **💡 Use Cases & Beispiele** ### **Minimaler Product Page Timer** → Platzierung: Produktseite → Timer Style: Plain Numbers → Hintergrund: Einzelfarbe (weiß oder transparent) → Grenze: Keine → Typografie: Kleiner Titel, mittlerer Timer, subtiler Separator ### **Bold Top Bar Ankündigung** → Platzierung: Top / Bottom Bar → Position: Top + Sticky → Vorlage: Neon oder Elektrisch Timer Style: Flip-Clock oder Square-Kacheln → Button Animation: Pulse Close Icon: Ermöglicht mit passender Farbe ### **Saisonale Landing Page Verkauf** → Platzierung: Landing Page → Hintergrund: Muster (z. B. Geburtstag, Karneval oder saisonales Thema) Timer Style: Kreisfliesen → Progress Bar: Ermöglicht mit Markenfarben → Button: Abgerundete Ecken mit Hover Glow-Effekt --- # **🎉 Endergebnis** Nach erfolgreicher Konfiguration helfen Ihnen die Design- und Styling-Einstellungen, Countdowns zu erstellen, die sich wie ein natürlicher Teil Ihrer Storefront anfühlen. ✅ Countdowns passen zu Ihren Markenfarben und Ihrer Typografie ✅ Timer-Styles schaffen das richtige Maß an visueller Dringlichkeit ✅ Hintergründe und Muster bestimmen die Stimmung für jede Kampagne ✅ Buttons zeichnen sich durch Animationen und Hover-Effekte aus ✅ Abstand und Grenzen geben Ihrem Countdown professionellen Polnisch ✅ Custom CSS bietet unbegrenzte Design-Flexibilität ✅ Jeder Platzierungstyp respektiert seine eigenen Designbeschränkungen Die Verwendung dieser Designoptionen stellt sicher, dass Ihre Countdown-Timer absichtlich, professionell und auf den Rest Ihres Shops ausgerichtet aussehen ✨