> ## 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). # 🎨 So legen Sie benutzerdefiniertes CSS für Countdown-Timer und Bars fest > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. Möchten Sie, dass Ihr Countdown-Timer oder Ihre Bar perfekt zu Ihrem Store-Branding passt? 🎨 Während die App umfangreiche Design-Steuerelemente enthält, benötigen Sie manchmal zusätzliche Flexibilität, um bestimmte Styling-Details anzupassen. Die **Custom CSS** Mit der Funktion können Sie Ihre eigenen CSS-Regeln auf Countdown-Timer und Balken für eine erweiterte visuelle Anpassung anwenden. In diesem Leitfaden erfahren Sie alles, was Sie über das Hinzufügen und Verwalten von Custom CSS für Countdown-Platzierungen wissen müssen. --- # **⚠️ Bevor Sie beginnen** Vor der Verwendung von Custom CSS: * Stellen Sie sicher, dass Sie bereits einen Countdown-Timer oder eine Countdown-Leiste erstellt haben. * Stellen Sie sicher, dass Sie Zugang zum **Design** Tab im Countdown-Editor. * Haben Sie ein grundlegendes Verständnis von CSS oder Zugang zu einem Entwickler, der helfen kann. ⚠️ **Wichtig:** Custom CSS ist **Nicht verfügbar für Checkout Page Countdowns**. Weil Shopify Checkout verwendet ein sicheres UI Extension Framework, externe CSS-Injektion ist eingeschränkt durch Shopify. Custom CSS wird vollständig unterstützt auf: * Produktseiten * Landing Pages * Top Bars * Bodenstäbe * Warenkorbseiten * Warenkorbschubladen * E-Mail-Platzierungen --- # **🛠️ Schritt 1 - Öffnen Sie den Design Tab** Öffnen Sie den Countdown-Timer oder die Bar, die Sie anpassen möchten. Dann: ➡️ Klicken Sie **Design** Tab. Scrollen Sie nach unten, bis Sie die **Custom CSS** Schnitt. 💡 Custom CSS funktioniert zusätzlich zu Ihren vorhandenen Designeinstellungen, Vorlagen, Farben und Typografieauswahlen. --- # **🎨 Schritt 2 - Öffnen Sie den Custom CSS-Abschnitt** Im Design-Tab: ➡️ Suchen Sie die **Custom CSS** Karte. In diesem Abschnitt finden Sie: * Ein CSS Editor * Ein Starter CSS Template * An **Beantragen** Taste Die Startervorlage enthält häufig verwendete Selektoren, so dass es einfacher ist, mit der Anpassung des Countdowns zu beginnen, ohne Klassennamen manuell identifizieren zu müssen. --- # **✍️ Schritt 3 - Fügen Sie Ihr benutzerdefiniertes CSS hinzu** Der Editor enthält mehrere gebrauchsfertige Selektoren. ### **Verfügbare Selektoren** Auswahl Beschreibung `.futureblink-countdown-timer` Gesamter Countdown-Container `.futureblink-countdown-timer .title` Haupttitel `.futureblink-countdown-timer .subheading` Teilüberschrift `.futureblink-countdown-timer .cta-button` Call-to-Action-Button `.futureblink-countdown-timer .close-btn` Schließsymbol --- ### **Beispiel: CSS** Um den Titel fett zu machen und seine Farbe zu ändern: .futureblink-countdown-timer .title Schriftgewicht: 700; Farbe: #ff6600; } 💡 Sie können bei Bedarf auch eigene Selektoren, Medienanfragen, Animationen und zusätzliche CSS-Regeln hinzufügen. --- # **✅ Schritt 4 - Wenden Sie Ihr CSS an** Nach Eingabe Ihres CSS: ➡️ Klicken **Beantragen**. Einmal aktiviert, ist **Beantragen** Button ändert sich **Zurücksetzen**, zeigt an, dass Ihre benutzerdefinierten Stile aktiv sind. ### **Was automatisch passiert** Die App führt automatisch mehrere Aktionen hinter den Kulissen aus: * Injiziert Ihr CSS in die Storefront. * Zusätze `!important` gegebenenfalls Priorität. * Scopes Stile auf die aktuelle Countdown-Konfiguration. * Verhindert Stylingkonflikte mit anderen Countdowns. Dies hilft sicherzustellen, dass Ihr CSS konsistent in Ihrer Storefront funktioniert. --- # **💾 Schritt 5 — Speichern und Veröffentlichen** Nach der Anwendung Ihres CSS: ➡️ Klicken **Sparen**. ➡️ Klicken **Veröffentlichen**. ⚠️ Sparen allein aktualisiert die Storefront nicht. Der Countdown muss ebenfalls veröffentlicht werden, bevor Kunden die Änderungen sehen können. --- # **👀 Schritt 6 - Überprüfen Sie die Änderungen** Nach der Veröffentlichung: ➡️ Öffnen Sie Ihre Storefront. ➡️ Navigieren Sie zu der Seite, auf der der Countdown erscheint. ➡️ Erfrischen Sie die Seite. Wenn die aktualisierten Stile nicht sofort angezeigt werden, führen Sie eine harte Aktualisierung durch: **Windows** `Ctrl + Shift + R` **Mac** `Cmd + Shift + R` Falls weitere Anpassungen erforderlich sind: ➡️ Zurück zum Editor. ➡️ Aktualisieren Sie das CSS. ➡️ Klicken **Beantragen**, **Sparen**, und **Veröffentlichen** noch einmal. --- # **⚠️ Wichtige Hinweise** ### **Checkout Page Limitation** Custom CSS ist bei Checkout Page Countdowns nicht verfügbar, weil ShopifyCheckout UI Extensions arbeiten in einer sicheren Umgebung, die die benutzerdefinierte CSS-Injektion einschränkt. ### **Automatisches !wichtiges Handling** Die App fügt automatisch hinzu `!important` Priorität auf CSS-Deklarationen beim Rendern von Stilen auf der Storefront. Wenn `!important` ist bereits vorhanden, die App vermeidet es, sie zweimal anzuwenden. ### **Scoped Styling** Jeder Countdown erhält seinen eigenen isolierten Styling-Bereich. Dies bedeutet: ✅ Unterschiedliche Countdowns können unterschiedliche Designs haben. ✅ Stile bleiben für den ausgewählten Countdown isoliert. ✅ Andere Seitenelemente bleiben unberührt. ### **Option zurücksetzen** Klicken **Zurücksetzen** entfernt nur Custom CSS. Sie betrifft nicht: * Meldebögen * Farben * Typografie * Designeinstellungen * Countdown-Konfiguration ### **View Guide** Der Custom CSS Abschnitt enthält auch eine **View Guide** Link, der bei Bedarf zusätzliche CSS-Referenzen bereitstellt. --- # **❓ Fehlerbehebung** Wenn Ihre Styles nicht korrekt erscheinen: ➡️ Überprüfen Sie, dass **Beantragen** wurde angeklickt. ➡️ Bestätigen Sie, dass der Countdown **Gerettet** und **Veröffentlicht**. ➡️ Überprüfen Sie, ob die Selektoren genau mit den angegebenen Klassennamen übereinstimmen. ➡️ Testen Sie mit einem Incognito- oder Private-Browserfenster. ➡️ Führen Sie eine harte Aktualisierung durch, um zwischengespeicherte Stile zu löschen. --- # **🎉 Endergebnis** ✅ Ihr Countdown-Timer oder Bar spiegelt die Styling-Anforderungen Ihrer Marke wider. ✅ Themen-Styling-Konflikte werden durch automatische CSS-Prioritätsbehandlung minimiert. ✅ Einzelne Countdowns können unabhängig gestylt werden. ✅ Benutzerdefinierte Stile bleiben isoliert, ohne andere Storefront-Elemente zu beeinflussen. Custom CSS bietet eine flexible Möglichkeit, Countdown-Designs zu optimieren, während der Rest Ihres Setups einfach und einfach zu verwalten ist. 🚀