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

Aktualisiert am: 10/09/2026