Les popups restent l’un des outils de conversion les plus efficaces en e-commerce. Une popup bien configurée sur Shopify peut capturer des emails, offrir un code promo au bon moment, ou retenir un visiteur sur le point de quitter votre boutique. Le problème, c’est que la plupart des marchands installent une application payante pour quelque chose que Shopify permet de faire nativement.
Dans ce guide, on va créer ensemble trois types de popups sur Shopify sans installer la moindre app : une popup email classique, une popup de réduction au scroll, et une popup d’intention de sortie. Tout en code Liquid, prêt à copier-coller dans votre thème OS 2.0.
Créer ma boutique Shopify et commencer à convertir →
Pourquoi les popups fonctionnent encore en 2026
On entend souvent que les popups sont mortes, que les visiteurs les détestent, que Google les pénalise. La réalité est plus nuancée. Les données de 2025-2026 montrent que les popups bien exécutées conservent un taux de conversion moyen entre 3% et 5% sur les boutiques e-commerce françaises. Le mot-clé ici est “bien exécutées”.
Ce qui a changé, c’est la tolérance des visiteurs. Une popup plein écran qui apparaît à la seconde où vous arrivez sur un site, c’est terminé. En revanche, une popup qui propose une réduction de 10% après que le visiteur a scrollé 40% de la page produit, ça convertit parce que l’intention d’achat est déjà là.
Google pénalise les interstitiels intrusifs sur mobile depuis la mise à jour de janvier 2017, renforcée par les Core Web Vitals. Concrètement, cela signifie qu’il faut éviter les popups plein écran au chargement sur mobile, préférer les bannières ou les modales partielles, et toujours offrir un moyen simple de fermer la popup. Toutes les solutions présentées dans cet article respectent ces contraintes.
Méthode 1 : popup email native avec Liquid et CSS
Cette première méthode crée une popup classique de capture d’email qui s’affiche après un délai configurable. Elle fonctionne sur tous les thèmes Shopify OS 2.0.
Le code Liquid de la popup
Dans votre éditeur de thème Shopify, allez dans Contenu du thème > Snippets et créez un nouveau snippet nommé popup-email.liquid :
{% comment %} Popup email capture - Speed Ecom {% endcomment %}
<div id="se-popup-overlay" style="display:none;">
<div id="se-popup-modal">
<button id="se-popup-close" aria-label="Fermer">×</button>
<h3>{{ section.settings.popup_title | default: '10% de réduction sur votre première commande' }}</h3>
<p>{{ section.settings.popup_text | default: 'Inscrivez-vous à notre newsletter et recevez votre code promo par email.' }}</p>
{% form 'customer', id: 'se-popup-form' %}
<input
type="email"
name="contact[email]"
placeholder="Votre adresse email"
required
autocomplete="email"
/>
<input type="hidden" name="contact[tags]" value="popup,newsletter" />
<button type="submit">Je veux ma réduction</button>
{% endform %}
</div>
</div>
Le CSS pour styliser la popup
Ajoutez ce CSS dans le même snippet ou dans votre fichier base.css :
#se-popup-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
#se-popup-modal {
background: #fff;
border-radius: 12px;
padding: 2rem;
max-width: 440px;
width: 90%;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: se-popup-fadein 0.3s ease;
}
@keyframes se-popup-fadein {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
#se-popup-close {
position: absolute;
top: 0.5rem; right: 0.75rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
line-height: 1;
}
#se-popup-modal h3 {
margin: 0 0 0.5rem;
font-size: 1.35rem;
color: #1a1a2e;
}
#se-popup-modal p {
color: #555;
margin: 0 0 1rem;
font-size: 0.95rem;
}
#se-popup-form input[type="email"] {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
margin-bottom: 0.75rem;
box-sizing: border-box;
}
#se-popup-form input[type="email"]:focus {
border-color: #1a1a2e;
outline: none;
}
#se-popup-form button[type="submit"] {
width: 100%;
padding: 0.75rem;
background: #1a1a2e;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
#se-popup-form button[type="submit"]:hover {
background: #2d2d5e;
}
@media (max-width: 480px) {
#se-popup-modal {
padding: 1.5rem;
margin: 1rem;
}
}
Le JavaScript de déclenchement
Ajoutez ce script à la fin du snippet :
<script>
(function() {
var DELAY_MS = 5000;
var COOKIE_NAME = 'se_popup_seen';
var COOKIE_DAYS = 7;
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + days * 86400000);
document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
}
if (getCookie(COOKIE_NAME)) return;
setTimeout(function() {
var overlay = document.getElementById('se-popup-overlay');
if (!overlay) return;
overlay.style.display = 'flex';
}, DELAY_MS);
document.addEventListener('click', function(e) {
if (e.target.id === 'se-popup-close' || e.target.id === 'se-popup-overlay') {
document.getElementById('se-popup-overlay').style.display = 'none';
setCookie(COOKIE_NAME, '1', COOKIE_DAYS);
}
});
var form = document.getElementById('se-popup-form');
if (form) {
form.addEventListener('submit', function() {
setCookie(COOKIE_NAME, '1', 30);
});
}
})();
</script>
Pour activer la popup, il suffit d’inclure le snippet dans votre layout principal theme.liquid juste avant la balise </body> :
{% render 'popup-email' %}
Ce système utilise un cookie pour ne pas afficher la popup aux visiteurs qui l’ont déjà vue ou fermée. Le cookie expire après 7 jours pour les fermetures, et après 30 jours pour les soumissions.
Méthode 2 : popup de réduction au scroll
Cette variante affiche la popup uniquement quand le visiteur a scrollé un certain pourcentage de la page. C’est particulièrement efficace sur les pages produits longues, car le visiteur a déjà montré de l’intérêt.
Créez un nouveau snippet popup-scroll.liquid et reprenez le même HTML/CSS que la méthode 1. La seule différence se trouve dans le JavaScript de déclenchement :
<script>
(function() {
var SCROLL_THRESHOLD = 40;
var COOKIE_NAME = 'se_scroll_popup_seen';
var triggered = false;
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + days * 86400000);
document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
}
if (getCookie(COOKIE_NAME)) return;
window.addEventListener('scroll', function() {
if (triggered) return;
var scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
if (scrollPercent >= SCROLL_THRESHOLD) {
triggered = true;
var overlay = document.getElementById('se-popup-overlay');
if (overlay) overlay.style.display = 'flex';
}
});
document.addEventListener('click', function(e) {
if (e.target.id === 'se-popup-close' || e.target.id === 'se-popup-overlay') {
document.getElementById('se-popup-overlay').style.display = 'none';
setCookie(COOKIE_NAME, '1', 7);
}
});
})();
</script>
La variable SCROLL_THRESHOLD contrôle le pourcentage de scroll nécessaire pour déclencher la popup. À 40%, le visiteur a lu presque la moitié de la page, ce qui signifie qu’il est engagé avec votre contenu.
Méthode 3 : popup d’intention de sortie (exit-intent)
La popup d’exit-intent est la plus puissante des trois. Elle se déclenche quand le curseur de la souris quitte la fenêtre vers le haut, ce qui indique que le visiteur est sur le point de fermer l’onglet ou de changer de page. Sur mobile, on détecte plutôt l’inactivité prolongée ou le retour rapide vers le haut de la page.
Voici le JavaScript pour le snippet popup-exit.liquid :
<script>
(function() {
var COOKIE_NAME = 'se_exit_popup_seen';
var triggered = false;
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + days * 86400000);
document.cookie = name + '=' + value + ';expires=' + d.toUTCString() + ';path=/;SameSite=Lax';
}
if (getCookie(COOKIE_NAME)) return;
function showPopup() {
if (triggered) return;
triggered = true;
var overlay = document.getElementById('se-popup-overlay');
if (overlay) overlay.style.display = 'flex';
}
/* Desktop : curseur quitte la fenêtre par le haut */
document.addEventListener('mouseleave', function(e) {
if (e.clientY < 10) showPopup();
});
/* Mobile : bouton retour ou inactivité */
var lastScrollY = 0;
var scrollUpCount = 0;
window.addEventListener('scroll', function() {
if (window.scrollY < lastScrollY) {
scrollUpCount++;
if (scrollUpCount > 5 && window.scrollY < 200) showPopup();
} else {
scrollUpCount = 0;
}
lastScrollY = window.scrollY;
});
document.addEventListener('click', function(e) {
if (e.target.id === 'se-popup-close' || e.target.id === 'se-popup-overlay') {
document.getElementById('se-popup-overlay').style.display = 'none';
setCookie(COOKIE_NAME, '1', 3);
}
});
})();
</script>
La détection sur mobile utilise un compteur de scrolls remontants. Si le visiteur scrolle vers le haut de manière répétée et se retrouve proche du sommet de la page, c’est un signal fort qu’il cherche la barre d’adresse ou le bouton retour.
Bonnes pratiques pour des popups qui convertissent sur Shopify
La mécanique technique ne suffit pas. Voici les principes qui font la différence entre une popup à 1% de conversion et une popup à 5%.
Le timing est tout
Ne montrez jamais une popup instantanément. Le visiteur n’a pas encore eu le temps de comprendre ce que vous vendez. Un délai de 5 secondes minimum ou un scroll de 30-40% sont les seuils qui fonctionnent le mieux en e-commerce francophone. Sur les pages produits, le déclenchement au scroll est préférable car il s’adapte à la longueur du contenu.
L’offre doit être concrète
“Rejoignez notre newsletter” ne convertit pas. “10% sur votre première commande” convertit. La valeur perçue doit être immédiate et quantifiable. Les codes promo en pourcentage fonctionnent mieux que les montants fixes sous 50€, et inversement au-dessus.
Un seul champ, un seul bouton
Chaque champ supplémentaire réduit le taux de conversion d’environ 25%. Demandez uniquement l’email. Le prénom, le téléphone, les préférences : tout cela viendra après, dans votre séquence email de bienvenue.
Le design doit être cohérent avec votre marque
Une popup avec un design générique casse la confiance. Reprenez les couleurs de votre thème, la même typographie, le même ton. Le visiteur ne doit pas avoir l’impression qu’un élément étranger vient de se greffer sur votre site.
Testez et mesurez
Suivez le taux de conversion de chaque popup via les tags Shopify Customer. Chaque soumission ajoute le tag “popup” au client, ce qui vous permet de segmenter dans Shopify et dans votre outil d’emailing. Comparez les performances entre les trois méthodes et gardez celle qui convertit le mieux pour votre audience.
Alternative : utiliser les sections Shopify OS 2.0
Si vous préférez une approche sans toucher au code Liquid, Shopify OS 2.0 permet de créer des sections personnalisées avec des paramètres éditables depuis le customizer. Cette méthode est idéale si vous voulez que des personnes non-techniques puissent modifier le contenu de la popup.
L’idée est de créer une section popup-promo.liquid dans le dossier sections/ de votre thème, avec un schéma JSON qui expose les paramètres (titre, texte, délai, couleur de fond, etc.) dans l’éditeur visuel Shopify. Le code est identique à la méthode 1, mais les valeurs en dur sont remplacées par des variables section.settings.
Cette approche a l’avantage d’être modifiable sans toucher au code, mais elle ne fonctionne que sur les pages qui supportent les sections (toutes les pages en OS 2.0, mais pas les pages de checkout).
Conformité RGPD et consentement
En France, une popup qui collecte des emails doit respecter le RGPD. Concrètement, cela implique de mentionner l’utilisation qui sera faite de l’email (newsletter, offres commerciales), d’ajouter un lien vers votre politique de confidentialité sous le formulaire, et de ne jamais pré-cocher une case de consentement. Le formulaire Shopify Customer gère nativement le double opt-in si vous l’activez dans vos paramètres de notifications.
Ajoutez cette ligne sous le champ email dans votre snippet :
<p style="font-size: 0.75rem; color: #888; margin-top: 0.5rem;">
En soumettant ce formulaire, vous acceptez de recevoir nos offres par email.
<a href="/policies/privacy-policy" style="color: #888; text-decoration: underline;">Politique de confidentialité</a>
</p>
Ce qu’il faut retenir
Les popups sur Shopify ne nécessitent pas d’application payante. Avec du code Liquid propre et un déclenchement intelligent, vous pouvez capturer des emails et booster vos conversions sans alourdir votre boutique. La popup d’exit-intent est généralement la plus performante, suivie de la popup au scroll. Commencez par une seule, mesurez, puis itérez.
Lancer ma boutique Shopify avec les bonnes bases →
Tu veux un thème Shopify qui inclut déjà tout ça ? Découvre Speedfly, le thème Shopify français pensé pour les e-commerçants francophones.
