Darstellung konfigurieren
Diese Anleitung erklärt, wie Sie die visuelle Darstellung eines Popups steuern: Größe, vertikale Position, Header-Sichtbarkeit, Inhalt, eigenes CSS und Auslöser — all diese Einstellungen können pro Gerät vorgenommen werden.
Gerätespezifische Einstellungen und Vererbung
Die Karte Anzeige ist in drei Tabs gegliedert — Desktop, Tablet und Mobil — wobei jeder Tab dieselben Einstellungen gruppiert (Inhalt, Darstellung, Auslöser & Timing, Eigenes CSS).
- Desktop ist die Basis. Die auf dem Tab Desktop eingestellten Werte gelten überall.
- Tablet und Mobil übernehmen Desktop standardmäßig. Jedes vererbte Feld zeigt ein Kettenglied-Symbol und ist ausgegraut, mit dem Desktop-Wert als Anzeige.
- Entsperren Sie ein Feld, indem Sie sein Kettenglied-Symbol anklicken. Das Feld wird mit dem aktuellen Desktop-Wert als Ausgangspunkt befüllt, und Sie können dem Gerät dann einen eigenen Wert geben.
- Verknüpfen Sie ein Feld erneut, indem Sie das Symbol erneut anklicken, um die Überschreibung zu löschen und wieder von Desktop zu erben.
Die Vererbung ist flach: Das Entsperren von Tablet beeinflusst Mobil nicht und umgekehrt — beide erben nur von Desktop.
Die Storefront ermittelt den effektiven Wert pro Gerät anhand der eigenen Breakpoints des Themes, sodass er auch dann korrekt bleibt, wenn ein Theme seine Breakpoints anpasst. Smartphones (XS/SM) verwenden die Mobil-Werte, Tablets (MD) die Tablet-Werte und größere Bildschirme (LG/XL/XXL) die Desktop-Werte. Wenn ein Besucher die Größe ändert oder das Gerät dreht, während ein Popup geöffnet ist, werden Größe, Ausrichtung, Helles Schließen-Symbol, eigenes CSS und CMS-Inhalt live auf das neue Gerät umgestellt.
Modalgröße
Im Abschnitt Anzeige steuert das Feld Modalgröße die Breite des Popup-Dialogs. Die Werte entsprechen direkt Bootstrap-Modal-Größenklassen:
| Option | Bootstrap-Klasse | Ungefähre Breite |
|---|---|---|
| Klein | modal-sm | ~300 px |
| Standard | (keine) | ~500 px |
| Groß | modal-lg | ~800 px |
| Extra Groß | modal-xl | ~1140 px |
| Vollbild | modal-fullscreen | 100 vw × 100 vh |
Wählen Sie Vollbild für immersive Inhalte wie Cookie-Consent-Overlays oder Begrüßungsbildschirme.
Vertikale Ausrichtung
Das Feld Vertikale Ausrichtung steuert, wo das Popup auf dem Bildschirm vertikal sitzt.
| Option | Verhalten |
|---|---|
| (keine) | Modal erscheint oben im Viewport (Bootstrap-Standard). |
| Oben | Wie Standard — Modal erscheint nahe der Oberkante. |
| Mitte | Modal wird vertikal im Viewport zentriert. |
| Unten | Modal wird am unteren Rand des Viewports ausgerichtet. |
Mitte und Unten sind nützlich für Toast-artige oder Cookie-Hinweis-artige Popups.
Header ausblenden
Der Schalter Header ausblenden in der Untergruppe Darstellung entfernt die Modal-Header-Leiste (die normalerweise den Popup-Titel und den × Schließen-Button enthält).
Wenn „Header ausblenden" aktiviert ist:
- Die Header-Leiste wird unsichtbar.
- Der Schließen-Button wird als schwebendes Overlay in der oberen rechten Ecke des Modal-Inhaltsbereichs neu positioniert, sodass der Besucher das Popup weiterhin schließen kann.
- Der Modal-Body behält das Zero-Padding-Styling — Ihr CMS-Inhalt geht bis zum Rand.
Verwenden Sie „Header ausblenden" für Bild-nur-Popups oder randlose CMS-Layouts, bei denen die Header-Leiste das Design optisch stören würde.
Helles Schließen-Symbol
Der Schalter Helles Schließen-Symbol zeigt das Schließen-Symbol (×) in Weiß an. Das standardmäßige Schließen-Symbol ist ein dunkles „X", das schwer zu erkennen ist, wenn es über einem dunklen Bild oder einem randlosen CMS-Layout liegt (ein häufiges Problem auf Mobil, wo ein Bild oft an der Oberkante des Modals liegt).
Standardmäßig ist der Schalter AUS (dunkles Standard-×). Schalten Sie ihn AN, damit das × in Weiß angezeigt wird und auf dunklen Bildern oder Hintergründen sichtbar bleibt. Da es eine gerätespezifische Einstellung ist, können Sie z. B. das dunkle × auf Desktop beibehalten und das helle × nur auf Mobil aktivieren — entsperren Sie das Feld Helles Schließen-Symbol im Tab Mobil und schalten Sie es ein.
Responsive CMS-Seite (Inhalt)
Unter der Untergruppe Inhalt jedes Geräte-Tabs können Sie eine andere CMS-Seite zuweisen:
| Tab | Gerät | Breakpoints |
|---|---|---|
| Desktop — CMS Seite (Pflicht) | Desktop | LG, XL, XXL (und Fallback für andere) |
| Tablet — CMS Seite | Tablet | MD |
| Mobil — CMS Seite | Smartphone | XS, SM |
Lassen Sie die CMS Seite bei Tablet oder Mobil leer, um auf die Desktop-CMS-Seite zurückzufallen.
Das Plugin überwacht Viewport-Änderungen. Wenn ein Besucher die Browsergröße ändert oder das Gerät dreht, während das Popup geöffnet ist, erkennt das Plugin die neue Geräteklasse und tauscht den Modal-Body-Inhalt gegen die passende CMS-Seite aus — ohne das Popup zu schließen.
CMS-Inhalt und Abstände
Das Popup-Plugin setzt padding: 0 im Modal-Body. Alle Abstände sind Aufgabe der Abschnitte und Blöcke der CMS-Seite. Dies gibt Ihnen volle Kontrolle über randlose Bilder, Hintergrundfarben und interne Abstände.
Wenn Header ausblenden deaktiviert ist, bietet der Modal-Header einen Standard-Schließen-Button (der interne Name des Popups wird nicht angezeigt; Shopware rendert einen leeren Header).
Beispiele
| Ziel | Konfiguration |
|---|---|
| Vollbild-Willkommensmodal | Desktop → Modalgröße: Vollbild, Header ausblenden: an |
| Zentriertes Rabattangebot | Desktop → Modalgröße: Standard, Vertikale Ausrichtung: Mitte |
| Cookie-Hinweis am unteren Rand | Desktop → Modalgröße: Groß, Vertikale Ausrichtung: Unten |
| Anderes Design für Smartphones | Tab Mobil → eigene CMS Seite (einspaltig) setzen |
| Sichtbarer Schließen-Button nur auf Mobil | Tab Mobil → Helles Schließen-Symbol entsperren, einschalten |
| Kleinerer Dialog auf Smartphones | Tab Mobil → Modalgröße entsperren, Klein wählen |