Nous allons voir dans ce tutoriel comment créer une Popup sur Shopify. Ce système est très utile pour proposer une information importante, proposer un abonnement à la newsletter ou encore proposer une offre irrésistible 🙂

Vous pouvez voir le résultat sur le site de démo.

Comment cette Popup va t-elle fonctionner ?

C’est une Popup qui va s’afficher au moment ou le client va vouloir sortir du site… ce qu’on appelle une exit popup ! très pratique pour lui proposer quelque chose avant son départ et donc d’augmenter vos taux de conversions 😉 D’un point de vue technique c’est au moment ou la souris va sortir du site que la popup va apparaitre. Cependant sur mobile ce comportement n’existe pas il est donc impossible de prévoir à quel moment le client va partir… Et la c’est effectivement un gros problème… Alors le plus souvent dans le milieu on fait une condition qui dit qu’uniquement pour les mobiles et tablettes la fenêtre s’ouvrira à partir d’un certain lapse de temps passé sur le site ! C’est un bon compromis n’est ce pas ? de toute façon on peut rien faire de mieux 😀

Le contenu de la Popup est libre et vous allez pouvoir y mettre ce que vous voulez. Cependant je vous mâche le travail en vous proposant un Template tout prêt avec les éléments suivants:

  • Une image,
  • Un titre,
  • Un texte,
  • Un bouton d’action.

Installation du code sur Shopify

Rendez-vous dans l’administration de votre Shopify et cliquez sur Boutique en ligne -> Actions -> Modifier le code.

Nous sommes donc dans les entrailles du thème et nous allons pouvoir bidouiller 😉 Par contre n’oubliez pas de faire une copie de votre thème avant toute intervention !

ps: pour en savoir plus sur la copie d’un thème je vous invite à regarder la vidéo plus bas !

La partie Affichage de la Popup

A ce stade vous allez trouver dans le dossier Layout votre fichier theme.liquid et vous rendre tout en bas du fichier afin de trouver la balise suivante : body

Mettez-vous juste avant, une ligne au dessus et copiez/collez le code suivant:

<div class="dg-popup">    
 <div id="dg-popup-modal">     
  <div class="modal-content">
    <div class="close">×</div>
    <div class="modal-text">
      <img src="url-image" alt="" class="img" />
      <div class="modal-title">Titre de la popup</div>
      <p>
        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
        Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500.
      </p>           
      <a href="url-lien" class="modal-btn">En savoir plus</a>
    </div>
  </div>
 </div>
</div>

Vous allez pouvoir modifier le titre et le texte sans casser les balises ! changez juste les mots et les phrases et il ne devrait pas avoir de problème 😉

Pour changer l’image il vous suffit de remplacer le "url-image" par l’url d’une de vos images que vous aurez préalablement mise dans Paramètres – Fichiers – Télécharger un fichier – Copiez/Collez l’URL de l’image.

Il est également possible de changer le lien du bouton en modifier "url-lien" par l’url d’une de vos pages, produits ou collections.

La partie Options de la Popup

Rendez-vous dans Assets – theme.js, app.js ou timber.js… bref un fichier.js et copiez/collez tout en bas le code suivant:

(function(){
  
  const modal = document.getElementById("dg-popup-modal");
  const modalContent = document.querySelectorAll("#dg-popup-modal .modal-content");  
  const btnOpen = document.getElementById("dg-popup-btn");
const btnClose = document.querySelectorAll("#dg-popup-modal .close")[0];
  let exitCounter = 0;
  
  // options generique  
  // taille max de la popup
  const popupMaxWith = "800px"; 
  
  // options mobile
  // délay de déclenchement de la popup sur mobile
  const delayMobile = "15000" // millisecondes
  
  modalContent[0].style.maxWidth = popupMaxWith;
  
 
  btnClose.onclick = function() {
    modal.style.display = "none";
  }
  
  if (window.matchMedia("(min-width: 768px)").matches) {

  document.addEventListener("mouseleave", function(event){
    if(event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {
      if(exitCounter < 2) {
        exitCounter++;
      }     
      if(exitCounter == 1) {
        dgOpenPopup();
      }
    }
  });
    
  }
  else {    
    // faire ouverture de popup x secondes
    setTimeout(function() {
       dgOpenPopup();      
    }, delayMobile);
    
  }
 
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
  
  function dgOpenPopup() {
    modal.style.display = "block";
    document.body.scrollTop = 0; 
    document.documentElement.scrollTop = 0;
  }
})();

2 options vous sont proposées:

  • La taille max de la Popup en modifiant la valeur en pixel de la variable popupMaxWith réglée sur une taille maximale de 800px. Bien évidemment elle s’adapte sur mobile 😉
  • Le délai d’apparition de la Popup sur Mobile et Tablette, la variable delayMobile qui est actuellement configurée sur 15000 millisecondes donc 15 secondes. A adapter selon votre convenance.

La partie Design de la Popup

Rendez-vous dans Assets – theme.scss, style.scss ou timber.scss… bref un fichier.scss et copiez/collez tout en bas le code suivant:

/* dg popup */
.dg-popup #dg-popup-modal {
  display: none; 
  position: fixed; 
  z-index: 9999999; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.7); 
}
.dg-popup .modal-content {
  background-color: #fefefe;
  text-align:center;
  margin: 5% auto; 
  padding: 15px;
  position:relative;
  heigth:100%;
  max-width: 800px;
  min-height:300px;
}
.dg-popup .img { max-width:100%; margin:0 auto 20px auto; }
.dg-popup .modal-title {
  text-transform:uppercase;
  font-size:24px;
  font-weight:bold;
  margin-bottom:20px;
}
.dg-popup .modal-text {
 padding:35px; 
}
.dg-popup .modal-btn {
  background:#FF6600;
  color:#FFF;
  display:inline-block;
  padding:10px 15px;
  margin:10px auto 0 auto;
}
.dg-popup .modal-btn:hover,
.dg-popup .modal-btn:focus {
  opacity:0.9;
  color:#FFF;
}
.dg-popup .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  padding:10px;
  font-weight: bold;
  position: absolute;
  top: -10px;
  right: 0px;
}
.dg-popup .close:hover,
.dg-popup .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .dg-popup .modal-content  {
    margin:5px;
    
  }
}

Etant donné que cette partie est assez délicate à expliquer par écrit, je vous invite à regarder la vidéo 😉

Ce tutoriel existe aussi en vidéo

Bon tuto à tous 🙂

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 8 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 23 commentaires

    1. Hello, non car c’était emmerdant pour faire les autres tutos 😀 mais tu peux le voir dans la vidéo 😉

  1. Salut, j’ai suivi à la lettre ton tuto, mais je ne vois la pop-up nul part, j’ai surement mal fait quelque chose… Peux-tu m’aider stp ? J’ai ajouté l’url de mon image et un lien vers un de mes produits pour la partie html, mais la pop-up ne s’affiche nul part

    1. Hello, quel thème as tu ?

  2. Bonjour,
    Tout d’abord merci beaucoup pour l’ensemble de tes tutos ils sont top ! Problématique: Lorsque je suis sur la page d’accueil de mon site et que le pop-up apparait, je clique sur le bouton en « savoir plus » mais ça m’affiche la page produit sans rien « Error 404 ». Alors que la même action sur une page produit (peu importe le produit) fonctionne correctement ! Je ne comprend pas pourquoi sur la page d’accueil le lien ne se réalise pas :'( . Si tu as une réponse à ma problématique merci d’avance !

    1. Bonjour et merci pour le commentaire. C’est étrange en effet mais aucune idée du problème il faudrait investiguer dans le code ou voir si l’url est bonne.

  3. Bonjour Dgeo Dev et merci pour ce jolie tuto 🙂

    Quelles seraient les lignes de code à rajouter pour afficher cette pop-up uniquement sur la page d’Accueil svp?

    Merci d’avance pour votre travail

  4. Salut!

    Est-il possible de changer la redirection lorsqu’on clique sur le bouton? J’aimerais que la personne reste exactement à l’endroit où elle était quand la pop-up est apparue.
    J’imagine qu’un changement est nécessaire au niveau du Href mais je ne suis pas assez doué pour trouver comment changer ça.
    Merci par avance 🙂

  5. Bonjour, merci pour tes vidéos c’est super ! Par contre dans mes fichiers je n’es que theme.css.liquid au lieu de theme.scss.liquid et la pop up ne fonctionne pas malgrès que je l’es suivis à la lettre et pareil pour la vidéo avec la bannière dynamique ?

    1. Hello, oui tu peux mettre le code dans theme.css.liquid ça fonctionnera. Pour le reste ca dépend peut être que le thème n’est pas compatible.

  6. Franchement merci infiniment, tes tutos sont juste COMPLÈTE, a chaque fois je suis les étapes j’arrive au même résultat, vraiment merci bcp

    1. Hello, avec plaisir 😉 et merci pour le message !

  7. Bonjour,
    Comment faire pour que la pop up ne s’affiche qu’une seule fois sur mobile ?
    Merci !

  8. Ou plutôt comment éviter qu’elle de s’affiche à chaque page sur mobile.
    C’est un peu pesant en navigation d’avoir la meme pop up sur chaque page

    1. Hello, cela demanderait un développement sur mesure 🙂

  9. Merci pour le tuto !

    Tout fonctionne bien et je voudrais savoir comment arrondir la border du champ email de la newsletter.

    Merci pour ton aide et bonne journée

  10. Merci pour le tuto !

    Je voulais savoir comment arrondir la border du champ email du pop up ? J’imagine qu’il faut le modifier directement sur la Newsletter et non pas dans une des 3 parties ou nous avons ajouté du code. Et donc dans quelle section du code?

    Merci pour ton aide et bonne journée.

    1. Bonjour, la c’est au niveau du css du thème, il faudrait récupérer la class et mettre un border-radius dessus 🙂

  11. Bonjour Dgeo,
    J’ai suivi ta video et je m’y suis reprise a 2 fois, pourtant le popup ne s’affiche pas après réactualisation du site sur desk, par contre fonctionne en version mobile.
    Btw je nai pas trouvé de scss ou de .liquid dans les assets j’ai copié la 3eme partie, celle du design dans theme.css.
    Comment puis je mettre le timer de 15sec dans toutes les versions?

    1. Bonjour, c’est que le thème a du mal avec ce code la… faudrait si possible demander directement au support du thème. Pour le timer ce n’est qu’uniquement pour la version mobile.

  12. Bonjour. Comment déclencher l’apparition du popup uniquement au clique sur un lien ?

    1. Hello, difficile avec ce tutoriel sans un développement sur mesure.

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine