Ein Popup erstellen
Diese Anleitung erläutert jedes Feld, das beim Erstellen oder Bearbeiten eines Popups unter Inhalte > Ultimate Popups verfügbar ist. Das Tutorial „Erste Schritte" erklärt den einfachen Standardweg; diese Anleitung ist die vollständige Feldreferenz für den Editor.
Der Editor ist in drei Karten gegliedert: Allgemein (globale Einstellungen), Anzeige (gerätespezifische Einstellungen auf den Tabs Desktop / Tablet / Mobil) und Bedingungen (globales Targeting).
Popup-Editor öffnen
- Neues Popup erstellen: Navigieren Sie zu Inhalte > Ultimate Popups und klicken Sie auf Popup hinzufügen.
- Bestehendes Popup bearbeiten: Klicken Sie auf eine beliebige Zeile in der Liste, um die Detailansicht zu öffnen.
Abschnitt Allgemein
Diese Einstellungen gelten global — sie gelten für das Popup unabhängig vom Gerät.
Aktiv
Schaltet das Popup ein oder aus. Inaktive Popups werden in der Storefront nie angezeigt.
Name (Pflichtfeld)
Eine interne Bezeichnung, die in der Popup-Liste angezeigt wird. Besucher sehen diesen Namen nie. Verwenden Sie etwas Aussagekräftiges, z. B. Sommerschlussverkauf 2026 — Exit-Intent.
Anzeigefrequenz
Wie oft das Popup demselben Browser angezeigt wird: Immer, Einmal pro Sitzung, Einmal pro Tag (24 h) oder Einmalig. Dies ist eine besucherbezogene Begrenzung und keine gerätespezifische Einstellung. Siehe Häufigkeit und Cookie-Regeln festlegen.
Abschnitt Anzeige (pro Gerät)
Die Karte Anzeige hat drei Tabs — Desktop, Tablet und Mobil. Jedes Feld hier kann pro Gerät variieren: Desktop ist die Basis, und Tablet und Mobil übernehmen Desktop, bis Sie das Kettenglied-Symbol eines Feldes anklicken, um es zu entsperren. Wie die Vererbung im Detail funktioniert, erfahren Sie unter Darstellung konfigurieren.
Jeder Tab gruppiert dieselben vier Untergruppen.
Inhalt
| Feld | Beschreibung |
|---|---|
| CMS Seite | Die Shopping-Experience-Seite, die im Modal angezeigt wird. Pflichtfeld auf dem Tab Desktop; optional auf Tablet/Mobil (übernimmt Desktop, wenn vererbt). Erstellen Sie die Seite zuerst unter Inhalte > Shopping Experiences. Das Plugin setzt kein Padding im Modal-Body, sodass die CMS-Seite alle Abstände selbst steuert. |
Darstellung
Ausführliche Informationen finden Sie unter Darstellung konfigurieren.
| Feld | Beschreibung |
|---|---|
| Modalgröße | Klein, Standard, Groß, Extra Groß oder Vollbild. |
| Vertikale Ausrichtung | Wo das Popup vertikal erscheint: Oben (Standard), Mitte oder Unten. |
| Header ausblenden | Blendet die Modal-Header-Leiste aus und positioniert den Schließen-Button als schwebenden Overlay über dem Inhalt. |
| Helles Schließen-Symbol | Zeigt das Schließen-Symbol (×) in Weiß an (Standard AUS = dunkles ×). Einschalten, damit das × auf dunklen Bildern oder Hintergründen sichtbar bleibt — nützlich, um es z. B. nur auf Mobil zu aktivieren. |
Auslöser & Timing
Ausführliche Informationen finden Sie unter Auslöser und Timing festlegen.
| Feld | Beschreibung |
|---|---|
| Anzeigeauslöser | Sofort (beim Seitenaufruf) oder Exit-Intent. |
| Verzögerung (Sekunden) | Bei Sofort: Wartezeit nach dem Seitenaufruf, bevor das Popup öffnet. Bei Exit-Intent: Wartezeit als Fallback für Touch-Geräte (Standard 30 s). |
| Erforderliche Cookie-Einwilligung | Das Popup bleibt ausgeblendet, bis der Besucher die ausgewählten Cookies im Cookie-Banner der Storefront akzeptiert. Verwenden Sie dies, wenn das Popup einwilligungspflichtige Inhalte wie ein Drittanbieter-Newsletter-Formular lädt. Leer lassen, um das Popup unabhängig von der Einwilligung anzuzeigen. |
Eigenes CSS
Gerätespezifisches CSS zur Feinabstimmung dieses Popups. Es wird automatisch auf dieses Popup und Gerät begrenzt — schreiben Sie Selektoren relativ zum Modal (z. B. .btn-close). Siehe Eigenes CSS.
Popup über einen Link oder Button schließen
Um einen Link oder Button innerhalb Ihres CMS-Inhalts das Popup schließen zu lassen, fügen Sie ihm die CSS-Klasse ssd-popup-close hinzu. Das Plugin lauscht auf Klicks auf jedes Element mit dieser Klasse (einschließlich untergeordneter Elemente) und schließt das Modal.
<a href="https://example.com/" target="_blank" class="ssd-popup-close">Besuchen und schließen</a>
<button type="button" class="ssd-popup-close">Nein danke</button>Verwenden Sie die Klasse — nicht data-bs-dismiss="modal". Shopwares HTML-Sanitizer entfernt data-*-Attribute aus CMS-Inhalten, sodass data-bs-dismiss nie die Storefront erreicht. Das Attribut class übersteht die Sanitierung.
Abschnitt Bedingungen
Diese Einstellungen gelten global. Eine ausführliche Anleitung finden Sie unter Bestimmte Seiten ansprechen.
| Feld | Beschreibung |
|---|---|
| Verkaufskanäle | Auf welchen Verkaufskanälen dieses Popup erscheint. Leer lassen für alle. |
| Auslöseregeln | Shopware-Rule-Builder-Regeln. Alle ausgewählten Regeln müssen zutreffen (UND). Leer lassen, um allen Besuchern zu zeigen. |
| Zielmodus | Seitenbeschränkung (benannte Shopware-Routen) oder Benutzerdefinierte URL (Wildcard-Muster). Leer lassen für alle Seiten. |
| Seiten-Einschränkung | Erscheint, wenn Zielmodus „Seitenbeschränkung" ist. Auswahl aus: Startseite, Warenkorb, Kasse Bestätigen, Kasse Abschluss, Anmeldeseite, Produktdetailseite, Kategorie/Listing. |
| Kategorie-Einschränkung | Erscheint, wenn Seiten-Einschränkung „Kategorie/Listing" enthält. Begrenzt das Popup auf bestimmte Kategorien. |
| Produkt-Einschränkung | Erscheint, wenn Seiten-Einschränkung „Produktdetailseite" enthält. Begrenzt das Popup auf bestimmte Produkte oder Varianten. |
| Benutzerdefinierte URLs | Erscheint, wenn Zielmodus „Benutzerdefinierte URL" ist. Relative Pfade oder Wildcard-Muster wie /landing/*. |
Speichern
Klicken Sie in der Smart Bar auf Speichern. Eine Erfolgsbenachrichtigung bestätigt das Speichern. Änderungen werden beim nächsten Seitenaufruf in der Storefront wirksam (das Plugin invalidiert Cache-Tags für alle Seiten, auf denen das Popup aktiv war).
Popup löschen
Wählen Sie das Popup in der Liste (Checkbox) und wählen Sie dann Löschen aus dem Massenaktionen-Dropdown. Die Löschung kaskadiert und entfernt alle zugehörigen Regel-, Kategorie- und Verkaufskanal-Zuweisungen.