Exit-Intent Popups auf Shopify: Wie man eines baut, das konvertiert

Wichtigste Erkenntnisse

• Ein Exit-Intent-Popup in Shopify wird in dem Moment ausgelöst, in dem ein Käufer aussieht, als würde er die Seite verlassen wollen. Das gibt dir eine letzte Chance, eine E-Mail-Adresse zu erfassen oder einen Rabatt anzubieten.
• Auf dem Desktop wird es ausgelöst, wenn der Cursor in Richtung der Browser-Bedienelemente schnellt. Auf dem Handy gibt es kein echtes Verlassen mit der Maus, also greift man auf den Zurück-Button, schnelles Scrollen nach oben oder einen Timeout zurück.
• Der Aufbau ist schlank: ein Mouseout-Detector, ein Modal und Frequency Capping im localStorage, damit es nur einmal ausgelöst wird und nach dem Schließen wegbleibt.
• Googles Richtlinien für aufdringliche Interstitials richten sich meist auf Popups, die beim Einstieg über die mobile Suche den Content blockieren. Ein Exit-Popup, das beim Verlassen des Nutzers ausgelöst wird, ist im Allgemeinen ein geringeres Risiko, aber die Designregeln gelten trotzdem.
• Fudge baut das Popup als nativen Theme-Code mit sauberen Triggern und Capping, sodass du dir eine schwere Drittanbieter-App sparst.

Ein Exit-Intent-Popup in Shopify ist ein Popup, das erscheint, wenn ein Besucher signalisiert, dass er die Seite verlassen möchte. Es ist eine der wenigen Möglichkeiten, einen Käufer genau in dem Moment anzusprechen, in dem er geht, bevor der Tab geschlossen und die Session für immer weg ist.

Dieser Guide behandelt, was Exit-Intent ist, die CRO-Vorteile, wie du es nativ auf Desktop und Mobile einbaust und welche Google-Richtlinien du beachten musst, damit das Popup Conversions fördert, ohne deine Rankings zu verschlechtern.

Warum du uns vertrauen kannst

Wir arbeiten seit über vier Jahren im Shopify-Bereich und haben Hunderten von Brands geholfen, ihre Storefronts zu optimieren. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Sterne-Bewertung im Shopify App Store. Daher arbeiten wir auf derselben Theme-Ebene, auf der auch ein Popup lebt, und sehen genau, was kaputtgeht, wenn eines schlecht programmiert ist.

Was ist ein Exit-Intent-Popup?

Ein Exit Intent Popup ist ein Modal, das inaktiv bleibt, bis der Besucher eine Absicht zeigt, die Seite zu verlassen. Es ist ein Verhaltens-Trigger, kein Timer, der sofort nach dem Landen auf der Seite abläuft.

Auf dem Desktop wird die “Absicht zu gehen” an der Maus abgelesen. Wenn der Cursor sich nach oben aus dem Viewport heraus in Richtung Adressleiste, Zurück-Button oder einem anderen Tab bewegt, löst der Browser ein mouseout- oder mouseleave-Event aus, während sich der Zeiger über der Seite befindet. Dieser Exit nach oben ist das klassische Exit-Intent-Signal.¹

Der Inhalt ist meist ein einzelnes, fokussiertes Angebot: ein Rabattcode für die erste Bestellung, eine Newsletter-Anmeldung oder eine Erinnerung an Artikel, die noch im Warenkorb liegen.

Der CRO-Aspekt

Der Wert liegt im Timing. Ein Standard-Popup unterbricht einen Käufer, der sich noch umsieht. Ein Exit-Popup unterbricht selten jemanden, weil es erscheint, wenn der Besucher sowieso schon auf dem Weg nach draußen ist.

Das macht es zu einer kostengünstigen Recovery-Schicht. Ein Besucher, der eigentlich ohne Kauf gehen wollte, hinterlässt stattdessen eine E-Mail-Adresse oder überlegt es sich wegen eines Rabatts anders. Du stiehlst keinem engagierten Käufer die Aufmerksamkeit, du fängst ihn ab, wenn er zur Tür hinausgeht.

Exit-Intent ist eine Taktik innerhalb einer größeren Conversion-Strategie. Das Gesamtbild findest du in unserem Shopify CRO Guide. Speziell für die E-Mail-Erfassung, sieh dir Wie man ein E-Mail-Popup in Shopify hinzufügt an.

Wie man ein Exit-Intent-Popup auf Shopify baut

Du brauchst dafür keine separate App. Ein nativer Build besteht aus drei Teilen: dem Exit-Detektor, dem Modal und dem Frequency Cap, das verhindert, dass es nervig wird.

1. Exit auf dem Desktop erkennen

Das zuverlässigste Desktop-Signal ist der Mauszeiger, der den oberen Rand des Dokuments verlässt. Lausche auf ein mouseleave-Event im Dokument und prüfe, ob der Zeiger am oder über dem oberen Rand des Viewports ist.

document.addEventListener('mouseleave', (event) => {
    // clientY <= 0 bedeutet, dass der Mauszeiger den oberen Rand verlassen hat
    if (event.clientY <= 0) {
        showExitPopup()
    }
})

Die Prüfung auf clientY <= 0 ist wichtig. Ohne sie würdest du das Popup jedes Mal auslösen, wenn der Mauszeiger die Seite in irgendeine Richtung verlässt – auch beim Bewegen nach unten zur Taskleiste, was kein echtes Exit-Signal ist.

2. Das Mobile-Problem lösen

Mobile Geräte haben keinen Mauszeiger, also gibt es kein echtes Mouseout-Event zu erkennen. Ein Desktop-Exit-Intent-Skript bringt auf dem Smartphone nichts, und der meiste Shopify-Traffic ist mobil.

Die ehrliche Antwort ist, dass mobiles Exit Intent nur eine Annäherung ist. Stattdessen wählt man ein Proxy-Signal:

Keines davon ist so sauber wie das Desktop-Signal. Der Zurück-Button-Ansatz kommt der echten Absicht (Exit Intent) am nächsten, aber gehe vorsichtig damit um: Sperre den Shopper niemals komplett auf der Seite ein und lass die Zurück-Aktion des Browsers weiterhin funktionieren.

3. Frequency Capping, damit es nur einmal feuert

Ein Exit-Popup, das auf jeder Seite und in jeder Session wieder auftaucht, führt schnell zu einem Bounce. Speichere einen Flag, damit es nur einmal gefeuert wird und das Wegklicken respektiert.

const SEEN_KEY = 'exit_popup_seen'

function showExitPopup() {
    // already shown or dismissed, do nothing
    if (localStorage.getItem(SEEN_KEY)) return

    openModal()
    localStorage.setItem(SEEN_KEY, '1')
}

Verwende localStorage für ein Capping, das über Besuche hinweg erhalten bleibt, oder sessionStorage, wenn du es nur für die aktuelle Session unterdrücken willst. Wenn der Käufer das Popup schließt oder konvertiert, sorgt derselbe Flag dafür, dass es nicht wiederkommt.

Die Regel ist einfach: Respektiere das Schließen. Wenn jemand das Popup wegklickt, hat er geantwortet. Frage beim nächsten Seitenaufruf nicht noch einmal.

Schädigen Exit-Intent-Popups die SEO?

Google hat Richtlinien zu aufdringlichen Interstitials veröffentlicht, die den Zugang zu Inhalten erschweren können. Das gilt vor allem für Seiten, auf die von der mobilen Suche aus zugegriffen wird, wo ein Popup den Hauptinhalt blockiert, während die Seite lädt oder kurz danach.²

Was die Richtlinien als Problem markieren:

• Ein Popup, das den Hauptinhalt verdeckt, sobald der Besucher von einem Suchergebnis kommt.
• Ein eigenständiges Interstitial, das der Nutzer wegklicken muss, bevor er etwas lesen kann.
• Ein Layout, bei dem der Above-the-Fold-Bereich größtenteils aus dem Interstitial anstatt aus dem Content besteht.

Was Google als grundsätzlich risikoärmer beschreibt:

• Interstitials, die gesetzlich vorgeschrieben sind, wie Cookie-Einwilligungen oder Altersprüfungen.
• Login-Dialoge für Inhalte, die nicht öffentlich indexiert werden sollen.
• Banner, die angemessen viel Platz einnehmen und sich leicht schließen lassen.

Ein Exit-Intent-Popup liegt näher auf der sicheren Seite, weil es ausgelöst wird, wenn der Nutzer die Seite verlässt, nicht wenn er über die Suche ankommt. Es blockiert den Inhalt nicht beim Einstieg – genau darauf zielen die Richtlinien ab.

Betrachte dies als Best-Practice-Design-Richtlinie und nicht als garantierte Verschlechterung deines Rankings. Es gibt keine offiziell veröffentlichten Prozentwerte für eine Abstrafung (Penalty), und du solltest bei jedem Guide skeptisch sein, der eine erfindet. Baue das Popup so, dass es beim Verlassen feuert, halte es einfach zu schließen, und du bleibst deutlich im Rahmen der Regeln.

Design- und UX-Regeln für Exit-Popups

Ein Popup, das konvertiert, und ein Popup, das nervt, trennen nur ein paar Details.

• Niemals beim Einstieg feuern. Der ganze Sinn besteht darin, dass es beim Exit-Intent auslöst und nicht über einen Timer, sobald die Seite geladen ist.
• Mache das Schließen offensichtlich. Ein klarer Schließen-Button, ein Klick auf den Hintergrund und die Escape-Taste sollten das Popup alle schließen. Ein gefangener Käufer ist ein verlorener Käufer.
• Fokus nur einfangen, während es offen ist. Ein Modal sollte den Tastaturfokus behalten, während es sichtbar ist (Focus Trap), damit die Tabulator-Reihenfolge im Popup bleibt. Nach dem Schließen muss der Fokus zur Seite zurückkehren. Dies ist der einzige Ort, an dem ein Focus Trap richtig ist, und er muss sich in dem Moment lösen, in dem sich das Popup schließt.
• Füge das richtige ARIA hinzu. Nutze role="dialog" mit aria-modal="true" und einem Label, damit Screenreader es als Dialog ansagen.
• Popups nicht stapeln. Wenn ein Cookie-Banner, ein Chat-Widget und ein Newsletter-Modal alle gleichzeitig feuern, hast du eine Wand aus Overlays. Prüfe, was bereits erscheint, bevor du noch etwas hinzufügst.

Wenn du das richtig machst, wirkt das Popup wie ein hilfreiches letztes Angebot und nicht wie ein Hindernis. Für eine Newsletter-fokussierte Variante des gleichen Musters, sieh dir unseren Guide zum Shopify Newsletter-Popup an.

App vs. Nativ: Der Kompromiss

Du kannst ein Exit Popup mit einer App in wenigen Klicks hinzufügen, und für einen nicht-technischen Shop ist das ein fairer Startpunkt. Die Kompromisse sind die altbekannten: eine monatliche Gebühr, zusätzliches JavaScript auf jeder Seite, ein Popup, das vielleicht nicht zu deinem Theme passt, und eine Abhängigkeit, die das Popup wieder mitnimmt, wenn du die App deinstallierst.

Nativer Code vermeidet alle vier Probleme. Der Haken ist, dass jemand den Detektor, das Modal, das Frequency Capping und die Barrierefreiheit (Accessibility) richtig programmieren muss. Genau diese Lücke füllt der nächste Abschnitt.

Wo Fudge ins Spiel kommt

Fudge ist der KI-Operator für Shopify-Stores und schreibt nativen Theme-Code. Du beschreibst dem Popup-Builder das Popup in einfachen Worten: “Füge ein Exit-Intent-Popup hinzu, das Desktop-Besuchern einen 10%-Rabatt anbietet, wenn sie die Seite verlassen wollen, mit einem Zurück-Button-Fallback auf Mobile, das nur einmal pro Session angezeigt wird.” Es schreibt Liquid, CSS und JavaScript direkt als Entwurf in dein Theme, den du dir ansehen kannst. Es erstellt den Rabattcode in Shopify und sendet Sign-ups an die Liste deiner Wahl, falls du es bittest, Klaviyo anzubinden.

Da der Output nativ ist, legt sich kein Drittanbieter-Widget über deinen Store, kein extra App-Skript wird auf jeder Seite geladen und es fallen keine monatlichen Popup-Gebühren an. Das Frequency Capping und die Exit-Trigger sind eingebaut, sodass es nur einmal ausgelöst wird und Wegklicken respektiert.

Und weil es Theme-Code ist, überlebt es die Deinstallation. Kündige Fudge und das Popup bleibt genau da, wo es ist – das Gegenteil von einem über eine App gerenderten Element, das verschwindet, sobald du die App entfernst. Das Gleiche gilt für alles andere, was du mit dem Shopify Store Editor baust. Nach dem Launch vergleicht Fudge Sign-ups und Bestellungen vor und nach Livegang des Popups und schlägt Änderungen für das Angebot, das Timing oder die Seiten vor, auf denen das Popup erscheint.

FAQ