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 = 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 😉

Bon tuto à tous 🙂

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

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