Exemples de design de popups : 24 modèles et 10 cas réels
Un popup bien conçu reste l’un des moyens les plus simples de recueillir une adresse e-mail, de mettre en avant une offre ou d’orienter un visiteur hésitant. Mal réglé, il masque le contenu, agace et fait partir. Cette page réunit 10 exemples réels relevés sur des boutiques en ligne françaises le 12/10/2026, puis 24 modèles de design classés en 5 familles, et les règles à respecter pour qu’un pop-up de site internet serve vos objectifs sans gêner vos visiteurs.
En bref
Un popup qui fonctionne poursuit un seul objectif (capturer un e-mail, retenir un visiteur, faire télécharger un contenu, augmenter le panier, provoquer un contact), propose une contrepartie claire (remise, cadeau, contenu, conseil) et se ferme facilement. Sur les sites relevés, les formats les plus courants sont la remise de bienvenue contre l’e-mail, le jeu concours et le mini-questionnaire qui segmente le visiteur. Pour le référencement, Google recommande d’éviter les interstitiels qui masquent toute la page ; pour la prospection par e-mail, la CNIL exige un consentement préalable.
Qu’est-ce qu’un popup sur un site internet ?
Un popup (on écrit aussi pop-up, pop up, ou au pluriel popups et pop-ups) est un élément qui s’affiche par-dessus la page consultée. Au Québec, l’OQLF (fiche « fenêtre surgissante » de son dictionnaire terminologique) y voit une « fenêtre secondaire s’ouvrant soudainement à l’avant ou à l’arrière de la fenêtre principale » et recommande « fenêtre surgissante » ou « fenêtre contextuelle » ; en France, l’Académie française consigne l’expression « fenêtre intruse ».
En pratique, deux objets portent le même nom :
- La fenêtre pop-up du navigateur : une nouvelle fenêtre ouverte par le site, souvent publicitaire. Les navigateurs la bloquent par défaut : selon l’aide de Google Chrome, « Par défaut, Google Chrome empêche les pop-ups de s’afficher automatiquement sur votre écran ».
- Le pop-up intégré à la page, qu’on appelle aussi pop-in : une boîte affichée dans la page elle-même, au-dessus du contenu. C’est le format utilisé aujourd’hui pour l’inscription à une newsletter (le « popup email » ou popup de capture d’e-mail), les offres de bienvenue, les pop-ups de promo ou de promotion d’un produit et les messages de notification ; c’est celui dont parle cette page.
Côté terminologie anglaise, « website pop-up » et « popup example » désignent la même chose ; on distingue aussi parfois le pop-up plein écran (interstitiel), la boîte centrale, la barre en haut ou en bas de page et le « slide-in » qui glisse depuis un coin de l’écran.
10 exemples réels de popups relevés le 12/10/2026
Nous avons ouvert les pages d’accueil de boutiques en ligne françaises le 12/10/2026 et relevé les fenêtres qui s’affichaient à l’arrivée. Ces messages changent souvent : ils illustrent des partis pris de conception, pas des offres en cours.
1. Zag Bijoux : le jeu concours contre l’adresse e-mail
Le bijoutier propose « Tentez de gagner 50€ ! » avec un champ e-mail et un bouton « Tenter ma chance ! ». La machine à sous illustrée à gauche rend le jeu explicite, et une mention sous le formulaire précise que l’inscription vaut abonnement aux newsletters et renvoie vers la politique de confidentialité.
2. Respire : la remise de bienvenue en encart latéral
Plutôt qu’une boîte centrale, la marque de soins affiche un encart dans le coin de l’écran : « 10 % de réduction » sur la première commande contre une adresse e-mail. Le visuel principal de la page reste lisible, un choix proche de ce que recommande Google (voir plus bas).
3. Nature & Découvertes : une offre courte et une mention de consentement
Le pop-up tient en trois éléments : « -10 % » en très gros, un champ e-mail, un bouton d’inscription. Une mention en petits caractères précise qu’en renseignant son adresse, le visiteur accepte de recevoir les nouveautés et offres de l’enseigne.
4. Fitness Boutique : remise de bienvenue et conditions visibles
« -10 % offerts sur votre 1ère commande » accompagne une photo de produits ; la condition (offre réservée aux produits de nutrition) est affichée sous le bouton plutôt que cachée dans une page annexe.
5. Panda Tea : le mini-questionnaire qui segmente
Le pop-up annonce une remise (« Vous avez débloqué 43 % de remise ») et demande de choisir sa « priorité du moment » parmi cinq boutons : digestion, minceur, sommeil, détox, routine bien-être. Chaque clic oriente vers une sélection et renseigne la marque sur l’intérêt du visiteur.
6. Drool : une question de goût avant l’offre
Le vendeur d’affiches pose une question (« What style of art do you most like? ») avec quatre réponses (bold, minimalist, typographic, abstract) et un lien de refus discret « No thanks ». L’offre (deux affiches offertes et une remise) passe après la personnalisation.
7. Kiloutou : le choix du profil
Le loueur de matériel demande de sélectionner son profil, professionnel ou particulier, pour afficher les bons prix (hors taxes ou toutes taxes comprises) et les bons services. Ici, le pop-up ne vend rien : il adapte le site au visiteur.
8. Nutripure : l’offre produit avec un refus explicite
« Offre articulation : ta gourde et ton collagène offerts » s’affiche avec une photo du produit, un bouton « J’en profite ! » et un lien « Non, merci » bien visible, qui évite au visiteur de chercher la croix de fermeture.
9. Facom : l’annonce d’une nouveauté
Le pop-up de la marque d’outillage ne demande aucune donnée : il annonce l’ouverture de sa boutique de vêtements et d’accessoires (« Facom Store est en ligne pour vous ! ») avec un seul bouton. C’est l’équivalent sur site d’une campagne de retargeting.
10. Garancia : quand le pop-up et le bandeau cookies se superposent
L’offre « 1 acheté = le 2ème offert » apparaît en même temps que le bandeau de consentement aux cookies, qui la recouvre en partie. Le visiteur doit fermer deux fenêtres avant de voir la page : un exemple de ce qu’il vaut mieux éviter en décalant le pop-up commercial après le choix sur les cookies.
24 modèles de design de popups, en 5 familles
Les modèles ci-dessous sont des maquettes d’inspiration, réalisées par des designers pour illustrer chaque usage ; ce ne sont pas des captures de sites en ligne. Ils montrent comment adapter la mise en page à l’objectif.
Famille 1 : construire une liste d’e-mails
Presque tous les sites affichent une invitation à s’abonner, mais peu de visiteurs s’inscrivent sans raison. Le message doit promettre quelque chose de concret.
Organiser un concours
Faire gagner un produit du catalogue en échange de l’adresse e-mail : le visiteur voit immédiatement ce qu’il peut obtenir, et vous recrutez des contacts intéressés par vos produits.
Créer un club
« Join the Club » : présenter l’inscription comme l’entrée dans un cercle de membres, avec actualités et offres réservées, crée un sentiment d’appartenance plus fort qu’un simple abonnement.
Segmenter dès l’inscription
Le formulaire demande de cocher homme ou femme et promet 30 % de réduction sur la première commande : un clic de plus permet ensuite d’envoyer des offres adaptées au profil.
Offrir une réduction claire
Le titre évoque la saison, la photo montre le produit, et l’offre (20 % sur la première commande) est écrite en gros : le visiteur comprend l’échange en une seconde.
Passer par une messagerie
Au lieu d’un champ e-mail, le pop-up propose de recevoir la remise par messagerie instantanée : utile si votre audience préfère ce canal.
Famille 2 : le retargeting sur site
Le retargeting sur site consiste à pousser le bon contenu au bon visiteur pendant sa visite, sans lui demander de coordonnées.
Annoncer un nouveau produit
Deux boutons suffisent : en savoir plus ou acheter. Le pop-up raccourcit le chemin vers la fiche produit.
Présenter une nouvelle collection
Un titre de collection, une remise et un bouton : le visiteur accède sans détour à la sélection.
Mettre en avant une marque ou une gamme
Le produit détouré, la couleur de la marque et un bouton d’achat : un format qui sert aussi à annoncer une vente.
Suggérer un article en fin de lecture
Déclenché au bas d’un article, ce pop-up propose une lecture liée : il prolonge la visite au lieu de l’interrompre.
Rappeler un produit consulté
Le visiteur a regardé un produit sans l’acheter ; le pop-up le lui remontre avec une remise pour lever l’hésitation.
Famille 3 : le téléchargement d’un contenu
Livres blancs, guides et rapports servent à générer des contacts qualifiés, surtout en B2B. Le visiteur doit comprendre immédiatement ce qu’il recevra.
Un formulaire long pour qualifier
Nom, entreprise, fonction, e-mail, téléphone : moins de visiteurs le remplissent, mais chaque contact obtenu est mieux renseigné.
Un formulaire court pour convertir
Un seul champ e-mail et un bouton : la forme la moins intrusive, à privilégier pour un premier contact.
Une courte description du contenu
Deux ou trois phrases sur le contenu du guide évitent l’effet « pop-up surgi de nulle part ».
Une illustration qui attire l’œil
Un pop-up original, avec une illustration colorée, se distingue d’un simple encart et rend le contenu promis plus concret.
Ouvrir sur une question
Une question qui touche le besoin du visiteur appelle une réponse ; le téléchargement devient cette réponse.
Famille 4 : les ventes e-commerce
Vente additionnelle, offre limitée, panier abandonné : les pop-ups interviennent aux moments où se joue la commande.
Une offre à durée limitée
Un compte à rebours rend l’échéance visible. À réserver aux vraies échéances : un compte à rebours qui se réinitialise à chaque visite trompe le client.
Une offre réservée aux clients fidèles
Afficher une offre spéciale aux clients qui reviennent, en le disant explicitement, renforce le lien avec la marque.
Des produits complémentaires à l’ajout au panier
Au moment de l’ajout au panier, proposer un accessoire ou un produit associé augmente le panier moyen sans détourner l’acheteur.
Retenir un panier sur le départ
Déclenché quand le visiteur s’apprête à quitter la page (intention de sortie), ce pop-up propose 15 % de réduction pour finaliser la commande.
Compléter le look après l’achat
Trois produits assortis, un bouton d’ajout au panier chacun : la recommandation se fait sans quitter la page.
Famille 5 : la prise de contact
Un visiteur qui a une question et ne trouve pas comment la poser repart. Le pop-up de contact apparaît là où les questions naissent : page tarifs, fiche produit technique.
Inviter les questions sur les prix
« Vous avez des questions ? » avec un champ e-mail et un champ question : la réponse peut déboucher sur une vente.
Montrer où vous êtes
Un plan à côté du formulaire rassure : le visiteur sait à qui il écrit.
Rappeler vos réseaux sociaux
Des pictogrammes discrets offrent un autre canal à ceux qui ne veulent pas remplir de formulaire.
Adopter un ton personnel
Demander un prénom et promettre un rappel par une personne rend l’échange plus humain.
Les bonnes pratiques d’un pop-up de site internet
Choisir le bon déclencheur
Les popups comportementales réagissent à ce que fait le visiteur plutôt qu’à son arrivée : temps passé sur la page, profondeur de défilement, nombre de pages vues, intention de sortie (le curseur qui se dirige vers la fermeture de l’onglet), ajout au panier. Ce ciblage limite l’effet intrusif. Réglez aussi la fréquence : un visiteur qui a fermé le pop-up ne devrait pas le revoir à chaque page.
Ne pas réafficher le même popup dans une session
Un visiteur qui a fermé un pop-up a répondu : il est très peu probable qu’il change d’avis quelques pages plus loin, et le revoir à chaque clic transforme une proposition en harcèlement. Réglez votre outil pour qu’un pop-up fermé ne s’affiche plus pendant la session, puis pendant plusieurs jours (la plupart des outils gèrent cette fréquence par un cookie ou par la mémoire du navigateur), et excluez les visiteurs déjà inscrits ou déjà clients de l’offre qui ne les concerne plus. Si vous avez plusieurs messages à faire passer, ne les enchaînez pas : un seul pop-up par visite suffit.
Ménager le mobile et le référencement
Google recommande d’éviter les interstitiels et boîtes de dialogue intrusifs, qu’il décrit comme des éléments « qui empêchent les utilisateurs de voir le contenu de la page, généralement à des fins promotionnelles », et conseille d’utiliser « des bannières plutôt que des interstitiels » ; il cite parmi les erreurs à éviter : « Ne masquez pas toute la page avec des interstitiels ». Côté publicité, la Coalition for Better Ads range les publicités en pop-up (« Pop-up Ads ») parmi les formats qui passent sous le seuil d’acceptabilité des consommateurs, sur ordinateur comme sur mobile. Sur petit écran, préférez une barre ou un encart qui laisse le contenu visible.
Collecter l’e-mail dans les règles
Pour envoyer de la prospection commerciale par e-mail à un particulier, la CNIL rappelle qu’il faut l’accord de la personne avant tout envoi. Cet accord n’est valable que s’il est « libre, spécifique, éclairé et univoque », ce qui suppose une action positive, comme cocher une case qui ne soit pas pré-cochée (exemple cité par la CNIL). Le pop-up doit donc dire clairement à quoi servira l’adresse, comme le font Zag Bijoux ou Nature & Découvertes dans les exemples ci-dessus.
Ne pas empiler pop-up et bandeau cookies
Le bandeau de consentement aux cookies est lui-même une fenêtre ; la CNIL indique que l’utilisateur doit pouvoir accepter ou refuser « avec le même degré de simplicité ». Afficher en même temps une offre commerciale (cas de Garancia ci-dessus) oblige à fermer deux fenêtres : décalez le pop-up commercial après le choix sur les cookies.
Faciliter la fermeture
Une croix visible, un lien de refus formulé simplement (« Non, merci », « No thanks ») et la fermeture d’un clic en dehors de la fenêtre. Un lien de refus culpabilisant, qui fait dire au visiteur qu’il préfère payer plus cher, irrite plus qu’il ne convertit.
Soigner le style
Le style du pop-up doit reprendre la charte du site (couleurs, typographie, ton) : un style de pop-up de notification générique, plaqué sur un site soigné, ressemble à une publicité tierce. Un titre court, un seul bouton d’action et une image en rapport avec l’offre suffisent.
Un titre qui annonce l’offre
Beaucoup d’internautes ferment un pop-up par réflexe, sans le lire. Le titre est souvent la seule ligne lue : il doit dire immédiatement ce que le visiteur gagne (« 10 % sur votre première commande », « Le guide PDF des tarifs 2026 »), et non une formule vague comme « Restons en contact ». Le bouton prolonge cette promesse en décrivant l’action (« Recevoir mon code », « Télécharger le guide ») et ce que le visiteur obtient réellement : s’il s’inscrit pour recevoir un code, il ne doit pas découvrir ensuite qu’il s’est abonné à une newsletter quotidienne.
Quelles performances attendre d’un popup
Les chiffres publics viennent surtout des éditeurs d’outils de pop-up, qui mesurent les campagnes de leurs propres clients : ils donnent un ordre de grandeur, pas une norme. Le plus récent rapport de Wisepops (édition 2026, publiée le 30 septembre 2025 et consultée le 19/10/2026), qui porte uniquement sur des pop-ups d’inscription par e-mail et calcule le taux de conversion en rapportant les e-mails collectés au nombre d’affichages, indique :
- un taux de conversion moyen de 4,82 %, contre 4,65 % dans l’édition précédente ;
- une moyenne de 57,7 % pour les 10 % de campagnes les plus performantes ;
- de fortes différences selon le secteur : 6,88 % en e-commerce, le plus haut niveau, et 2,01 % en B2B, le plus bas.
Autrement dit, un pop-up qui convertit quelques pour cent de ses affichages est dans la moyenne, et l’écart entre une campagne ordinaire et une campagne très bien ciblée est considérable. Comparez vos résultats à vos propres périodes précédentes plutôt qu’à ces moyennes, dont la définition du taux de conversion varie d’un éditeur à l’autre.
Mesurer et tester
Suivez le taux d’affichage, le taux de conversion du pop-up et son effet sur le reste du parcours (taux de rebond, ventes). Testez une variable à la fois : titre, offre, déclencheur, emplacement.
Créer un popup : avec quel outil ?
Trois solutions existent selon votre site et votre budget :
- Un module de votre CMS : Google note que « de nombreux CMS incluent des plug-ins » pour créer des boîtes de dialogue standards, par exemple pour l’inscription à une newsletter sur WordPress ; les plateformes e-commerce proposent aussi des applications dédiées.
- Votre outil d’e-mailing : la plupart intègrent un créateur de formulaires et de pop-ups relié directement à vos listes de contacts.
- Un logiciel de pop-up spécialisé : ciblage comportemental, tests A/B, modèles prêts à l’emploi, statistiques. Comparez les solutions dans notre sélection des meilleurs outils pour créer votre pop-up.
Pour d’autres idées de conception pour une boutique en ligne, consultez nos exemples de boutiques en ligne au design réussi, d’où sont tirés plusieurs des pop-ups ci-dessus.
FAQ sur les popups
Que veut dire pop-up ?
« Pop-up » vient de l’anglais to pop up, « surgir ». En informatique, le mot désigne une fenêtre ou une boîte qui s’affiche soudainement au-dessus de la page consultée, souvent pour un message publicitaire, une offre ou une demande d’information. Dans le commerce, il désigne aussi une boutique éphémère (pop-up store).
Quel est le synonyme de pop-up ?
En informatique : « fenêtre intruse » (expression consignée par l’Académie française), « fenêtre surgissante » ou « fenêtre contextuelle » (équivalents recommandés au Québec par l’OQLF). Pour le pop-up intégré à la page, on parle aussi de pop-in, de fenêtre modale ou de boîte de dialogue.
Comment fonctionne un pop-up ?
Un script ajouté au site affiche la fenêtre quand une condition est remplie : arrivée sur la page, délai écoulé, défilement, intention de sortie, ajout au panier. Les outils de pop-up permettent de régler ces déclencheurs, le ciblage (nouveaux visiteurs, clients, pages précises) et la fréquence d’affichage, puis de mesurer les résultats.
Pop-in ou pop-up : quelle différence ?
Au sens strict, le pop-up est une nouvelle fenêtre du navigateur, alors que le pop-in s’affiche à l’intérieur de la page. Dans l’usage courant du marketing, « pop-up » désigne les deux, et la plupart des « pop-ups » actuels sont en réalité des pop-ins.
Comment se débarrasser des pop-up ?
Pour les fenêtres publicitaires du navigateur, vérifiez le réglage de blocage : dans Chrome, il se trouve dans les paramètres des sites, et le navigateur les bloque par défaut. Les pop-ups intégrés aux pages se ferment avec leur croix ou leur lien de refus ; si des fenêtres continuent de s’afficher, l’aide de Chrome indique qu’il peut s’agir de notifications d’un site auxquelles vous vous êtes abonné (à bloquer dans les réglages des notifications), ou que l’appareil « peut être infecté par un logiciel malveillant ».
Comment créer un pop-up gratuitement ?
Les modules gratuits des CMS (extensions WordPress, applications des plateformes e-commerce) et les formules gratuites de nombreux outils d’e-mailing ou de pop-up suffisent pour un premier pop-up d’inscription. Les fonctions avancées (ciblage comportemental, tests A/B) sont généralement réservées aux offres payantes.
Concept store et pop-up store : quelle différence ?
Un pop-up store est une boutique éphémère, ouverte pour une durée limitée afin de lancer un produit, tester un emplacement ou créer l’événement. Un concept store est une boutique permanente qui réunit des produits de catégories différentes autour d’un univers ou d’un style de vie.
Quels sont les avantages d’un pop-up store ?
Il permet de tester un marché ou un emplacement sans bail de longue durée, de créer un rendez-vous autour d’une marque en ligne qui rencontre ses clients physiquement, et de lancer un produit avec un effet de rareté. C’est, dans le commerce physique, l’équivalent du pop-up sur un site : un message ponctuel, ciblé et limité dans le temps.
Pour aller plus loin :
Notez cet article
