Comment créer une Popup sur Shopify

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 Modèle (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 Mise en page (Layout) votre fichier theme.liquid et vous rendre tout en bas du fichier afin de trouver la fermeture de 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 global.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 Ressources (Assets) – base.css, theme.css, style.css ou autre fichier .css que votre thème utilise 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;
text-decoration:none;
}
.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 11 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 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 28 commentaires

    1. Dgeo Dev

      26 Oct 2020 Répondre

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

  2. Theo

    28 Oct 2020 Répondre

    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. Dgeo Dev

      29 Oct 2020 Répondre

      Hello, quel thème as tu ?

  3. ALEXIS Gigan

    30 Oct 2020 Répondre

    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. Dgeo Dev

      31 Oct 2020 Répondre

      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.

  4. jean-yves ginoux

    25 Nov 2020 Répondre

    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

  5. Geo

    26 Nov 2020 Répondre

    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 🙂

  6. Clém

    4 Déc 2020 Répondre

    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. Dgeo Dev

      4 Déc 2020 Répondre

      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.

  7. Amine

    13 Déc 2020 Répondre

    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. Dgeo Dev

      14 Déc 2020 Répondre

      Hello, avec plaisir 😉 et merci pour le message !

  8. Lenit

    21 Déc 2020 Répondre

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

  9. Lenit

    21 Déc 2020 Répondre

    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. Dgeo Dev

      23 Déc 2020 Répondre

      Hello, cela demanderait un développement sur mesure 🙂

  10. Thomas

    12 Mar 2021 Répondre

    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

  11. Thomas

    12 Mar 2021 Répondre

    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. Dgeo Dev

      12 Mar 2021 Répondre

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

  12. Alice

    26 Mai 2021 Répondre

    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. Dgeo Dev

      29 Mai 2021 Répondre

      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.

  13. Raphaël

    20 Juin 2021 Répondre

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

    1. Dgeo Dev

      20 Juin 2021 Répondre

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

  14. Charlotte

    1 Oct 2021 Répondre

    Bonjour,
    Je vous remercie pour votre tuto.
    La Pop Up fonctionne chez moi (je l’ai transformé en inscription à une newsletter).
    Est il possible de la faire apparaître seulement une fois sur la page d’accueil par visiteur ? Parce que actuellement elle apparait beaucoup trop souvent.

    Merci

    1. Dgeo Dev

      1 Oct 2021 Répondre

      Merci pour le com 🙂 malheureusement c’est assez complexe pour un tuto gratuit navré 🙁 sinon c’est dispo sur Speedfly au cas ou 🙂

  15. Estelle

    9 Oct 2021 Répondre

    Bonjour,

    Je rencontre un problème pour la création de la pop-up. Lorsque je me rends dans assets il y a uniquement index.js et non de theme.js ou encore de app.js. Le thème de la boutique est CONTEXT, pourriez-vous me dire à quoi cela est du ? Et si je peux quand même mettre en place la pop-up ?

    Je vous remercie,

    1. Dgeo Dev

      9 Oct 2021 Répondre

      Bonjour, oui peut importe tant que c’est un fichier .js

  16. Omar Zinbi

    14 Nov 2021 Répondre

    Bonjour,
    Tout d’abord merci pour votre tuto, je dois créer une boutique Shopify avec le template debut mais moi j’ai Dawn (c’est le template de base qui vient avec Shopify). et ajoutez une popup que l’utilisateur doit pouvoir fermer en cliquant sur une croix.
    J’ai essayé de suivre le tuto mais ne marche pas pour moi !!!

Laisser un commentaire

Fermer le menu
×
×

Panier