Comment Créer un Zoom sur image sur Shopify (Version Modal)

Nous allons voir dans ce tutoriel comment créer un système de zoom d’image de type lightbox en modal ! Le principe sera de cliquer sur une petite vignette afin de voir l’image en grand.

Comment mettre cela en place ?

On part du principe que vous avez déjà un thème avec un système de zoom sur vos images produits. Du coup on va partir sur une création complète du système pour par exemple le mettre dans une page ou dans une description d’un produit pour un guide des tailles ou autre…

Le Javascript – Fonctionnement du système

Rendez-vous dans boutique en ligne – actions – modifier le code – trouvez le dossier Ressources (Assets) et ouvrez votre fichier .js généralement theme.js, base.js, global.js et copiez/collez le code suivant:

if ((typeof window.DG) == 'undefined') {
  window.DG = {};
}

DG.ZoomImg = (id) => {
  let zoomWrapper = document.querySelector('.dgImgZoomImg-wrapper');
  let zoomWrapperImgs = zoomWrapper.querySelectorAll('.dgImgZoomImg');
  
  if(zoomWrapperImgs.length > 1) zoomWrapper.classList.add('multiple-imgs');
  let modal = document.getElementById('dgImgZoomModal');
  const modal2 = modal.parentNode.removeChild(modal);
  document.body.insertAdjacentHTML('beforeend', modal2.outerHTML);

  setTimeout(function(){ 
    let modal = document.getElementById('dgImgZoomModal');
    const img = document.getElementById(id);
    const modalImg = document.getElementById('dgImgZoomImg-zoom');
    img.onclick = function() {
      modal.style.display = "flex";
      modalImg.src = this.src;
    }

    const close = document.getElementsByClassName("dg-iz-close")[0];

    close.onclick = () => {
      modal.style.display = "none";
    }
  }, 1000);  
}

Le CSS – Style

Dans le même dossier et ouvrez cette fois votre fichier .css généralement theme.css, base.css, global.css et copiez/collez le code suivant:

.dgImgZoomImg-wrapper {
 position:relative; 
}

.dgImgZoomImg {
  cursor: pointer;
  transition: 0.3s;
  width: 300px;
  max-width: 100%;
}

.dgImgZoomImg-wrapper.multiple-imgs .dgImgZoomImg {
  margin-right:7px;
  margin-bottom:7px;
}

.dgImgZoomImg:hover {opacity: 0.7;}

.dg-iz-modal {
  display: none; 
  position: fixed; 
  z-index: 10000; 
  left: 0;
  top: 0;
  width: 100%; 
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height: 100%;
  bottom:0;
  overflow:visible;   
  background-color: rgba(0,0,0,0.9);
}

.dg-iz-modal-content {
  margin: auto; 
  width: 80%;
  max-width: 700px;
  animation-name: dg-iz-zoom;
  animation-duration: 0.3s;
}


@keyframes dg-iz-zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

.dg-iz-close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.dg-iz-close:hover,
.dg-iz-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .dg-iz-modal-content {
    width: 100%;
  }
}

Le HTML – Placement

Le code suivant est à copier/coller dans la description d’un de vos contenus, fiches produits, collections, pages etc…

<div class="dgImgZoomImg-wrapper">
<img id="dgImgZoomImg-1" class="dgImgZoomImg" src="url-image" alt=""> 
<div id="dgImgZoomModal" class="dg-iz-modal">
<img class="dg-iz-modal-content" id="dgImgZoomImg-zoom"> 
<span class="dg-iz-close">×</span>
</div>
</div>
<script defer="">
window.addEventListener("DOMContentLoaded", (event) => {
  DG.ZoomImg("dgImgZoomImg-1");
  DG.ZoomImg("dgImgZoomImg-2");
});
</script>

Fonctionnement

Rendez-vous dans paramètres – fichiers et ajoutez une image ou prenez en une existante et copiez l’url pour la coller à la place de « url-image »

Si vous avez plusieurs images alors vous devez dupliquer la ligne suivante et la copier juste en dessous de ca:

Changer l’url et l’id comme ceci « dgImgZoomImg-2 » si vous en avez d’autre « dgImgZoomImg-3 », « dgImgZoomImg-4 » etc

Il vous faudra également dupliquer le ligne suivante et l’adapter de la même manière:

Remplacer par « dgImgZoomImg-2 » etc…

Ce Tuto existe également en vidéo

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 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

Laisser un commentaire

Fermer le menu