> ## 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 Custom CSS für Popups 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 Ihre Popups perfekt zum Branding Ihres Shops passen? 🎨 Während Hoppy Popups enthält umfangreiche Anpassungsoptionen für das Design, **Custom CSS** gibt Ihnen die vollständige Kontrolle über erweiterte Styling-Anpassungen, die über die Standardeinstellungen hinausgehen. Egal, ob Sie die Typografie verfeinern, den Abstand anpassen, einzigartige visuelle Effekte erstellen oder themenspezifische Stylingkonflikte lösen, Custom CSS ermöglicht es Ihnen, Ihre Popups genau so anzupassen, wie Sie möchten. --- # **⚠️ Bevor Sie beginnen** Vor der Verwendung von Custom CSS: * Stellen Sie sicher, dass Ihr Popup bereits erstellt und gespeichert wurde. * Haben Sie ein grundlegendes Verständnis von CSS oder Zugang zu einem Entwickler. * Verstehen Sie, dass Custom CSS die Standard-Designeinstellungen außer Kraft setzen kann. 💡 Standard-Styling-Optionen wie Farben, Schriftarten und Abstände sind bereits im Design-Tab verfügbar. Custom CSS ist für erweiterte Styling-Anforderungen gedacht. --- # **🛠️ Schritt 1 - Öffnen Sie Ihr Popup-Setup** Offen **Hoppy Popups** App von Shopify Admin. Dann: ➡️ Öffnen Sie ein bestehendes Popup. ➡️ Oder erstellen Sie ein neues Popup, wenn Sie es noch nicht getan haben. Navigieren Sie zum **Design** Tab. Scrollen Sie nach unten, bis Sie die **Custom CSS** Schnitt. --- # **🎨 Schritt 2 - Öffnen Sie den Custom CSS-Abschnitt** Innerhalb der **Custom CSS** Abschnitt finden Sie: * Ein CSS Editor * An **Beantragen** Taste * A **Zurücksetzen** Taste * Ein Starter CSS Template Die Vorlage enthält häufig verwendete Popup-Selektoren, so dass Sie mit der Anpassung Ihres Popups beginnen können, ohne Klassennamen manuell identifizieren zu müssen. --- # **✍️ Schritt 3 - Fügen Sie Ihr benutzerdefiniertes CSS hinzu** Der Editor bietet mehrere gebrauchsfertige Selektoren zum Styling von Popup-Elementen. ### **Verfügbare Selektoren** Auswahl Beschreibung `.futureblink-popup` Gesamter Popup-Container `.futureblink-popup .title` Popup-Titel `.futureblink-popup .description` Popup Beschreibungstext `.futureblink-popup .cta-button` Call-to-Action-Button `.futureblink-popup .close-btn` Schließen Sie den Button --- ### **Mobile Selektoren** Für mobile-spezifische Styling, verwenden Sie die `.mobile` Variation. Auswahl Beschreibung `.futureblink-popup.mobile` Mobiler Popup-Container `.futureblink-popup.mobile .title` Mobiler Titel `.futureblink-popup.mobile .description` Mobile Beschreibung `.futureblink-popup.mobile .cta-button` Mobiler CTA-Button `.futureblink-popup.mobile .close-btn` Mobiler Schließknopf --- ### **Beispiel: CSS** Um den Popup-Titel und den CTA-Button anzupassen: `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 Sie können bei Bedarf auch zusätzliche Selektoren, Animationen, Medienanfragen und andere gültige CSS-Regeln hinzufügen. --- # **📱 Schritt 4 — Hinzufügen von Mobile-Specific Styling** Um Stile nur auf mobilen Geräten anzuwenden, verwenden Sie die `.mobile` Selektoren. Beispiel: `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` Die App wird automatisch verpackt `.mobile` Selektoren in einer mobilen Medienabfrage beim Rendern auf Ihrer Storefront. Dies bedeutet, dass Sie keine mobilen Haltepunkte für diese Selektoren manuell erstellen müssen. --- # **✅ Schritt 5 - Wenden Sie Ihr CSS an** Sobald Ihr CSS hinzugefügt wurde: ➡️ Klicken **Beantragen**. Die Vorschau wird automatisch aktualisiert, sodass Sie Ihre Styling-Änderungen sofort überprüfen können. ⚠️ Das einfache Einfügen von CSS in den Editor aktiviert es nicht. Sie müssen klicken **Beantragen** bevor die Stile aktiv werden. Wenn Sie Ihr benutzerdefiniertes Styling entfernen möchten: ➡️ Klicken **Zurücksetzen**. Dadurch wird die Standardvorlage wiederhergestellt und das benutzerdefinierte CSS deaktiviert. --- # **👀 Schritt 6 - Überprüfen Sie die Vorschau** Nach der Anwendung Ihres CSS: ➡️ Überprüfen Sie die Desktop-Vorschau. ➡️ Überprüfen Sie die Mobile Preview. Prüfen Sie, ob * Text wird korrekt angezeigt. * Tasten bleiben ausgerichtet. * Der Abstand erscheint konsistent. * Visuelle Effekte verhalten sich wie erwartet. Wenn Änderungen erforderlich sind: ➡️ Aktualisieren Sie das CSS. ➡️ Klicken **Beantragen** noch einmal. Die Vorschau wird nach jedem Update automatisch aktualisiert. --- # **💾 Schritt 7 — Speichern und Veröffentlichen** Sobald Sie mit dem Design zufrieden sind: ➡️ Klicken **Sparen**. ➡️ Klicken **Veröffentlichen**. ⚠️ Sparen allein aktualisiert Ihre Storefront nicht. Das Popup muss auch veröffentlicht werden, bevor Kunden die Änderungen sehen können. --- # **⚠️ Wichtige Hinweise** ### **Custom CSS überschreibt Designeinstellungen** Custom CSS hat Vorrang vor den meisten Standard-Design-Einstellungen. Wenn eine Designeinstellung ignoriert zu werden scheint, wird sie wahrscheinlich von Ihrem CSS überschrieben. --- ### **Mobile Handling ist automatisch** Die App konvertiert automatisch `.mobile` Selektoren in responsive mobile styles. Dies macht es einfach, separate Desktop- und mobile Designs zu pflegen, ohne benutzerdefinierte Medienanfragen zu schreiben. --- ### **Scoped Styling** Custom CSS wird automatisch auf das spezifische Popup erweitert, das bearbeitet wird. Dies verhindert Styling-Konflikte mit: * Andere Popups * Themenelemente * Sonstige Storefront-Inhalte --- ### **Option zurücksetzen** Klicken **Zurücksetzen** Entfernt nur das Custom CSS. Sie betrifft nicht: * Popup-Einstellungen * Designeinstellungen * Meldebögen * Inhaltskonfiguration --- ### **CSS-Validierung** Der Editor validiert keine CSS-Syntax. Wenn ein Stil nicht korrekt erscheint: ➡️ Überprüfen Sie die Selektornamen. ➡️ Überprüfen Sie Zahnspangen und Semikolons. ➡️ Überprüfen Sie das CSS auf Syntaxfehler. --- # **❓ Fehlerbehebung** Wenn Ihre Styles nicht korrekt erscheinen: ➡️ bestätigen, dass **Beantragen** wurde angeklickt. ➡️ Überprüfen Sie, ob das Popup wurde **Gerettet** und **Veröffentlicht**. ➡️ Überprüfen Sie, ob die Selektoren genau mit der bereitgestellten Vorlage übereinstimmen. ➡️ Testen Sie in einem Incognito- oder Private-Browserfenster. ➡️ Erfrischen Sie die Storefront, um zwischengespeicherte Stile zu löschen. --- # **🎉 Endergebnis** ✅ Ihr Popup kann über die Standard-Design-Einstellungen hinaus angepasst werden. ✅ Desktop- und mobile Erlebnisse können unabhängig gestaltet werden. ✅ Erweiterte visuelle Effekte und markenspezifisches Styling werden möglich. ✅ Benutzerdefinierte Stile bleiben für das ausgewählte Popup isoliert. Custom CSS bietet die Flexibilität, ein polierteres und markenkonsistenteres Popup-Erlebnis zu schaffen, während die Einfachheit der integrierten Design-Tools der App erhalten bleibt. ✨