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

À retenir

• Un pop-up 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 quand le curseur file vers l’interface du navigateur. Le mobile n’a pas de véritable sortie de souris, on se rabat donc sur le bouton retour, un scroll rapide vers le haut ou un délai d’inactivité.
• L’implémentation est légère : un détecteur de mouseout, une modale et une limite de fréquence dans le localStorage pour qu’il ne se déclenche qu’une fois par session et ne revienne pas après avoir été fermé.
• Les règles de Google sur les interstitiels intrusifs visent surtout les pop-ups qui bloquent le contenu dès l’arrivée depuis une recherche sur mobile. Un pop-up de sortie qui se déclenche quand l’utilisateur part présente généralement moins de risques, mais les règles de design comptent toujours.
• Fudge crée le pop-up sous forme de code natif du thème avec les bons déclencheurs et limitations, ce qui vous évite d’utiliser une application tierce trop lourde.

Un pop-up d’intention de sortie Shopify est un pop-up qui apparaît lorsqu’un visiteur montre qu’il est sur le point d’abandonner la page. C’est l’un des rares moyens de s’adresser à un acheteur au moment précis où il s’en va, 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 à respecter pour que le pop-up aide les conversions sans nuire au référencement.

Pourquoi vous pouvez nous faire confiance

Nous travaillons dans l’écosystème 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é 5.0 sur le Shopify App Store, nous travaillons donc sur la même couche de thème où vit un pop-up et voyons exactement ce qui casse quand il est mal codé.

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

Le signal fiable sur ordinateur est le curseur qui quitte 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 de la zone d’affichage (viewport).

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

La vérification clientY <= 0 est importante. Sans elle, vous déclencheriez le pop-up à chaque fois que le curseur quitte la page dans n’importe quelle direction, y compris vers la barre des tâches en bas, ce qui n’est pas un signal de départ.

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’intention de sortie pour ordinateur ne sert à rien sur un téléphone, alors que la majeure partie du trafic Shopify est mobile.

Pour être honnête, l’intention de sortie sur mobile est une approximation. On choisit plutôt un signal de remplacement :

Aucun n’est aussi propre que le signal sur ordinateur. L’approche du bouton retour est la plus proche de la vraie intention, mais utilisez-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 pop-up de sortie qui réapparaît sur chaque page, à chaque session, est un bon moyen de provoquer un rebond. Stockez un marqueur pour qu’il ne se déclenche qu’une 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 le localStorage pour une limite qui persiste entre les visites, ou sessionStorage si vous voulez seulement le masquer pour la session en cours. Quand l’acheteur ferme ou convertit via le pop-up, ce même marqueur l’empêche de revenir.

La règle est simple : respectez la fermeture. Si quelqu’un ferme le pop-up, il a donné sa réponse. Ne lui redemandez pas au prochain chargement de 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