Pop-ups d'intention de sortie sur Shopify qui convertissent (2026)

Points clés

• Un popup d’intention de sortie Shopify se déclenche au moment où un acheteur semble sur le point de partir, vous donnant une dernière chance de récupérer un e-mail ou d’offrir une réduction.
• Sur ordinateur, il se déclenche lorsque le curseur se dirige vers l’interface du navigateur. Sur mobile, il n’y a pas de véritable sortie de souris, on se rabat donc sur le bouton retour, un défilement rapide vers le haut, ou un délai d’inactivité.
• La création est légère : un détecteur de sortie de souris, une modale, et une limitation de fréquence dans le localStorage pour qu’il ne se déclenche qu’une fois par session et disparaisse après avoir été fermé.
• Les directives de Google sur les interstitiels intrusifs visent principalement les pop-ups qui bloquent le contenu dès l’arrivée depuis la recherche sur mobile. Un popup de sortie qui se déclenche lorsque l’utilisateur part présente généralement un risque plus faible, mais les règles de conception restent importantes.
• Fudge construit le popup sous forme de code de thème natif avec les bons déclencheurs et limitations, ce qui vous évite d’utiliser une application tierce lourde.

Un popup d’intention de sortie Shopify est une fenêtre contextuelle qui apparaît lorsqu’un visiteur signale qu’il est sur le point d’abandonner la page. C’est l’un des rares moyens de s’adresser à un acheteur au moment exact où il part, avant que l’onglet ne se ferme et que la session ne soit définitivement perdue.

Ce guide explique ce qu’est l’intention de sortie, son intérêt pour le CRO, comment la mettre en place nativement sur ordinateur et mobile, et les règles de pénalité de Google que vous devez respecter pour que le popup aide aux conversions sans nuire à votre référencement.

Pourquoi vous pouvez nous faire confiance

Nous travaillons dans l’univers Shopify depuis plus de quatre ans et avons aidé des centaines de marques à optimiser leurs boutiques. Nous développons Fudge, un éditeur de boutique IA noté 4.9 sur le Shopify App Store, nous travaillons donc sur la même couche de thème où se trouve un popup et voyons exactement ce qui casse lorsqu’il est mal construit.

Qu’est-ce qu’un pop-up d’intention de sortie ?

Un pop-up d’intention de sortie est une modale qui reste dormante jusqu’à ce que le visiteur montre son intention de partir, puis s’affiche une fois. C’est un déclencheur basé sur le comportement, pas un minuteur qui s’active dès la première seconde.

Sur ordinateur, “l’intention de partir” est lue depuis la souris. Quand le curseur se déplace vers le haut et sort de la zone d’affichage en direction de la barre d’adresse, du bouton retour ou d’un autre onglet, le navigateur déclenche un événement mouseout ou mouseleave avec le pointeur au-dessus de la page. Cette sortie par le haut est le signal classique de l’intention de sortie.¹

Le contenu est généralement une seule offre ciblée : un code promo pour une première commande, une inscription à la newsletter ou un rappel des articles qui attendent encore dans le panier.

L’intérêt pour le CRO

La valeur réside dans le timing. Un pop-up classique interrompt un acheteur en pleine navigation. Un pop-up de sortie n’interrompt personne, car il n’apparaît que lorsque le visiteur a déjà décidé de partir.

Cela en fait une couche de récupération à bas coût. Un visiteur qui allait partir les mains vides laisse finalement une adresse e-mail, ou change d’avis grâce à une réduction. Vous ne volez pas l’attention d’un acheteur engagé, vous en rattrapez un sur le pas de la porte.

L’intention de sortie est une tactique au sein d’une stratégie de conversion plus large. Pour une vue d’ensemble, consultez notre guide du CRO sur Shopify. Pour la partie capture d’e-mails en particulier, découvrez comment ajouter un pop-up e-mail sur Shopify.

Comment créer un pop-up d’intention de sortie sur Shopify

Vous n’avez pas besoin d’une application dédiée. Une implémentation native comporte trois parties : le détecteur de sortie, la modale, et la limite de fréquence qui l’empêche de devenir agaçant.

1. Détecter la sortie sur ordinateur

Sur desktop, le signal le plus fiable est le curseur quittant le bord supérieur du document. Écoutez l’événement mouseleave sur le document et vérifiez que le pointeur est au niveau ou au-dessus du haut du viewport.

document.addEventListener('mouseleave', (event) => {
    // clientY <= 0 signifie que le curseur est sorti par le bord supérieur
    if (event.clientY <= 0) {
        showExitPopup()
    }
})

Vérifier clientY <= 0 est important. Sans cela, vous déclencheriez le popup chaque fois que le curseur quitte la page dans n’importe quelle direction, y compris en descendant vers la barre des tâches, ce qui n’est pas un signal de sortie.

2. Gérer le problème du mobile

Le mobile n’a pas de curseur, il n’y a donc pas de véritable mouseout à détecter. Un script d’exit-intent pour desktop ne sert à rien sur un téléphone, et la majorité du trafic Shopify est mobile.

Pour être honnête, l’exit intent sur mobile est une approximation. À la place, vous choisissez un signal indirect (proxy) :

Aucun n’est aussi propre que le signal sur desktop. L’approche du bouton retour est la plus proche de la véritable intention, mais traitez-la avec précaution : ne piégez jamais complètement l’acheteur sur la page, et laissez l’action de retour du navigateur fonctionner.

3. Limiter la fréquence pour un affichage unique

Un popup d’exit intent qui réapparaît sur chaque page, à chaque session, est un excellent moyen de générer un rebond (bounce). Stockez un flag pour qu’il ne se déclenche qu’une seule fois et respecte la fermeture.

const SEEN_KEY = 'exit_popup_seen'

function showExitPopup() {
    // déjà affiché ou fermé lors de cette session, on ne fait rien
    if (localStorage.getItem(SEEN_KEY)) return

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

Utilisez localStorage pour un capping qui persiste d’une visite à l’autre, ou sessionStorage si vous voulez uniquement le bloquer pour la session en cours. Lorsque l’acheteur ferme ou convertit sur le popup, ce même flag l’empêche de revenir.

La règle est simple : respectez la fermeture. Si quelqu’un ferme le popup, il a donné sa réponse. Ne lui redemandez pas au prochain chargement de la page.

Les pop-ups d’intention de sortie nuisent-ils au SEO ?

C’est le point sur lequel la plupart des guides se trompent, voici donc la version exacte.

Google a publié des directives sur les interstitiels intrusifs qui peuvent rendre le contenu plus difficile d’accès. Cela s’applique principalement aux pages où l’on accède au contenu depuis une recherche sur mobile, où un pop-up bloque le contenu principal soit au chargement de la page, soit juste après.²

Ce que les directives signalent comme un problème :

• Un pop-up qui recouvre le contenu principal dès que le visiteur arrive d’un résultat de recherche.
• Un interstitiel autonome que l’utilisateur doit fermer avant de pouvoir lire quoi que ce soit.
• Une mise en page où la zone au-dessus de la ligne de flottaison est principalement l’interstitiel plutôt que le contenu.

Ce que Google décrit comme étant généralement moins risqué :

• Les interstitiels requis par la loi, comme le consentement aux cookies ou la vérification de l’âge.
• Les boîtes de dialogue de connexion sur des contenus qui ne sont pas censés être indexés publiquement.
• Les bannières qui occupent un espace raisonnable et sont faciles à fermer.

Un pop-up d’intention de sortie se situe plutôt du côté sûr, car il se déclenche quand l’utilisateur part, pas quand il arrive d’une recherche. Il ne bloque pas le contenu à l’entrée, ce qui est le comportement visé par les directives.

Considérez cela comme de bonnes pratiques de design, pas comme une chute garantie dans les classements. Il n’y a pas de pourcentage de pénalité officiel publié, et méfiez-vous de tout guide qui en invente un. Configurez le pop-up pour qu’il se déclenche à la sortie, gardez-le facile à fermer, et vous resterez bien dans l’esprit des règles.

Règles de design et d’UX pour les pop-ups de sortie

Un pop-up qui convertit et un pop-up qui agace ne sont séparés que par quelques détails.

• Ne le déclenchez jamais à l’entrée. Tout l’intérêt est qu’il s’active sur l’intention de sortie, pas sur un minuteur dès le chargement de la page.
• Rendez la fermeture évidente. Un bouton de fermeture clair, un clic sur l’arrière-plan et la touche Échap (Escape) devraient tous le fermer. Un acheteur piégé est un acheteur perdu.
• Ne bloquez le focus que pendant qu’il est ouvert. Une modale doit retenir le focus du clavier tant qu’elle est visible pour que la navigation par tabulation reste à l’intérieur, puis rendre le focus à la page à la fermeture. C’est le seul endroit où un “focus trap” est justifié, et il doit relâcher le focus dès que le pop-up se ferme.
• Ajoutez le bon ARIA. Utilisez role="dialog" avec aria-modal="true" et un label pour que les lecteurs d’écran l’annoncent comme une boîte de dialogue.
• N’empilez pas les pop-ups. Si une bannière de cookies, un widget de chat et une modale de newsletter s’affichent tous en même temps, vous obtenez un mur de pop-ups. Vérifiez ce qui s’affiche déjà avant d’en ajouter un autre.

Faites ça bien et le pop-up sera perçu comme une dernière offre utile plutôt que comme un obstacle. Pour une variante axée sur la newsletter avec le même fonctionnement, consultez notre guide sur le pop-up de newsletter Shopify.

App vs natif : le compromis

Vous pouvez ajouter un pop-up de sortie avec une application en quelques clics, et pour une boutique sans compétences techniques, c’est un bon point de départ. Les compromis sont connus : un abonnement mensuel, du JavaScript supplémentaire sur chaque page, un pop-up qui risque de ne pas correspondre à votre thème, et une dépendance qui supprime le pop-up avec elle lors de la désinstallation.

Le code natif évite ces quatre problèmes. Le hic, c’est que quelqu’un doit coder correctement le détecteur, la modale, la limite de fréquence et les détails d’accessibilité. C’est ce vide que la section suivante vient combler.

La place de Fudge

Fudge est un éditeur de boutique IA qui écrit du code de thème natif. Vous décrivez le pop-up en langage clair : “ajoute un pop-up d’intention de sortie qui offre 10 % de réduction quand un visiteur sur ordinateur s’apprête à partir, avec un déclenchement via le bouton retour sur mobile, qui ne s’affiche qu’une fois par session.” Il écrit le Liquid, le CSS et le JavaScript directement dans votre thème.

Puisque le résultat est natif, il n’y a aucun widget tiers qui s’affiche par-dessus votre boutique, pas de script d’application supplémentaire sur chaque page, et pas de frais mensuels pour le pop-up. Le contrôle de la fréquence et les déclencheurs de sortie sont intégrés, pour qu’il s’affiche une fois et respecte la fermeture.

Et comme c’est du code de thème, il survit à la désinstallation. Annulez Fudge et le pop-up reste exactement où il est, à l’inverse d’un élément rendu par une app qui disparaît quand vous la supprimez. C’est la même chose pour tout le reste que vous construisez avec l’éditeur de boutique Shopify.

FAQ