ℹ️ 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 istWenn 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 ✨

Aktualisiert am: 10/09/2026