Möchtest du die Optik deiner Announcement Bar vollständig kontrollieren? 🎨

Die integrierten Design-Einstellungen decken die meisten Anpassungswünsche ab, aber mit der Funktion Custom CSS (Benutzerdefiniertes CSS) kannst du das Styling über die Standardoptionen hinaus feinabstimmen.

Das ist nützlich für Händler, die ihre Markenvorgaben exakt umsetzen, Abstände anpassen, Typografie individualisieren oder theme-spezifische Stil-Konflikte lösen möchten.

⚠️ Bevor du beginnst

Bevor du Custom CSS verwendest:

• Stelle sicher, dass deine Announcement Bar bereits erstellt wurde.
• Du solltest Grundkenntnisse in CSS haben oder Zugriff auf einen Entwickler haben.
• Beachte, dass Custom CSS die Standard-Design-Einstellungen überschreiben kann.

ℹ️ Die meisten Händler benötigen Custom CSS nie. Verwende es nur, wenn die integrierten Design-Optionen das gewünschte Erscheinungsbild nicht ermöglichen.

🛠️ Schritt 1 — Den Design-Tab öffnen

Öffne die Hoppy Announcement Bar-App und navigiere zur Announcement Bar, die du anpassen möchtest.

Dann:

➡️ Klicke auf den Tab Design (Design).

Scrolle nach unten, bis du den Bereich Custom CSS (Benutzerdefiniertes CSS) findest.

🎨 Schritt 2 — Custom CSS aktivieren

Innerhalb des Bereichs Custom CSS:

➡️ Klicke auf Apply (Anwenden).

Sobald es aktiviert ist, erscheint ein CSS-Editor mit einem vorkonfigurierten CSS-Gerüst.

Dieses Gerüst enthält alle unterstützten Selektoren, sodass du verschiedene Elemente der Announcement Bar leichter ansprechen kannst, ohne die Klassennamen manuell ermitteln zu müssen.

✍️ Schritt 3 — Dein Custom CSS hinzufügen

Der Editor bietet vorgefertigte Selektoren für die wichtigsten Elemente der Announcement Bar.

Verfügbare Selektoren

Mobile Selektoren

Um gezielt mobile Geräte anzusprechen, verwende die .mobile-Variante.

Beispiele:

• .futureblink-announcement-bar.mobile .title
• .futureblink-announcement-bar.mobile .cta-button
• .futureblink-announcement-bar.mobile .close-btn

CSS-Beispiele

Um den Titel in Großbuchstaben mit zusätzlichem Abstand darzustellen:

.futureblink-announcement-bar .title {
text-transform: uppercase;
letter-spacing: 2px;
}

Um den CTA-Button auf mobilen Geräten über die volle Breite darzustellen:

.futureblink-announcement-bar.mobile .cta-button {
width: 100%;
}

💡 Du kannst innerhalb der bereitgestellten Selektoren alle gültigen CSS-Eigenschaften verwenden.

👀 Schritt 4 — Deine Änderungen in der Vorschau ansehen

Nachdem du dein CSS eingegeben hast:

➡️ Klicke auf Apply (Anwenden).

Die Live-Vorschau wird automatisch aktualisiert, damit du deine Änderungen sofort überprüfen kannst.

Falls Anpassungen nötig sind:

➡️ Bearbeite das CSS direkt im Editor.

➡️ Prüfe die aktualisierte Vorschau.

⚙️ Wie Custom CSS funktioniert

Die App wendet automatisch zusätzliche Verarbeitungsschritte an, um sicherzustellen, dass dein Styling korrekt funktioniert.

Automatische !important-Einfügung

Alle CSS-Deklarationen erhalten im Shop-Frontend automatisch die Priorität !important, damit Theme-Styles deine Änderungen nicht überschreiben.

Automatische mobile Verarbeitung

Selektoren mit der .mobile-Variante werden beim Rendern im Shop-Frontend automatisch in mobile Media Queries eingebettet.

Überschreibungspriorität von Design-Einstellungen

Custom CSS hat in der Regel Vorrang vor den Standard-Design-Einstellungen, die an anderer Stelle in der App vorgenommen wurden.

💾 Schritt 5 — Speichern und veröffentlichen

Sobald du mit dem Styling zufrieden bist:

➡️ Klicke auf Save (Speichern).

➡️ Klicke auf Publish (Veröffentlichen).

⚠️ Alleiniges Speichern aktualisiert nicht dein Shop-Frontend.

Die Konfiguration muss außerdem veröffentlicht werden, bevor Kund:innen die Änderungen sehen können.

🔄 Custom CSS zurücksetzen

Wenn du zu den Standard-Design-Einstellungen zurückkehren möchtest:

➡️ Öffne den Bereich Custom CSS.

➡️ Klicke auf Reset (Zurücksetzen).

Dadurch wird dein Custom CSS entfernt und die Steuerung wieder den Standard-Design-Einstellungen übergeben.

💡 Hilfreiche Tipps

Starte klein

Nimm eine Änderung nach der anderen vor, damit leichter erkennbar ist, was jede CSS-Regel beeinflusst.

Verwende die Live-Vorschau

Überprüfe Änderungen immer in der Vorschau, bevor du sie veröffentlichst.

Teste mobile Layouts

Selbst wenn dein CSS auf dem Desktop korrekt aussieht, solltest du das Erscheinungsbild auch auf mobilen Geräten überprüfen.

Erstelle eine Sicherungskopie

Bei umfangreicheren CSS-Anpassungen empfiehlt es sich, eine Kopie deines Codes außerhalb der App aufzubewahren.

❓ Fehlerbehebung

Wenn dein CSS nicht wie erwartet angewendet wird:

➡️ Vergewissere dich, dass Apply (Anwenden) aktiviert wurde.

➡️ Stelle sicher, dass die Announcement Bar Saved (gespeichert) und Published (veröffentlicht) wurde.

➡️ Prüfe genau, ob die Selektornamen mit den angegebenen Klassennamen übereinstimmen.

➡️ Teste im Inkognito-Fenster, um Browser-Cache-Probleme auszuschließen.

Für komplexe Styling-Anforderungen empfiehlt sich die Zusammenarbeit mit einem Shopify-Entwickler oder deinem Theme-Support-Team.

🎉 Endergebnis

✅ Deine Announcement Bar verwendet ein vollständig angepasstes Styling.

✅ Theme-Konflikte werden durch die automatische CSS-Priorisierung minimiert.

✅ Mobile und Desktop-Layouts können unabhängig voneinander gestaltet werden.

✅ Die Announcement Bar kann präziser an die visuelle Identität deiner Marke angepasst werden.

Custom CSS bietet maximale Flexibilität, wenn die Standard-Design-Einstellungen nicht ausreichen, und hilft dir dabei, ein raffinierteres und konsistenteres Shop-Frontend-Erlebnis zu schaffen. 🚀

Aktualisiert am: 01/09/2026