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

Aktualisiert am: 10/09/2026