Dans ce tutoriel nous allons créer un système d’avant, après sur Shopify. En effet ce tuto va vous apprendre à créer 2 images superposées avec un curseur à déplacer pour voir le avant après d’une image. Idéal pour les boutiques de beauté afin de mettre en valeur l’efficacité d’un produit 😉

Vous pouvez voir le résultat ici: https://dgeodev.myshopify.com/products/produit-1

Mise en place du système

2 possibilités s’offrent à vous ! Soit le mettre dans l’éditeur d’une fiche ou le mettre dans une section HTML au niveau de votre page d’accueil.

Partie Javascript

Rendez-vous dans les fichiers du thème – « Boutique en ligne – Actions – Modifier le code – dossier Assets » – Trouver un fichier .js ou .js.liquid (généralement theme.js ou theme.js.liquid).

Mettez-vous tout en bas du fichier et copiez/collez le code suivant:

if(document.querySelector(".comparison")) {

  function imageBeforeAfter(before,after) {
    let urlImageBefore = before;
    let urlImageAfter = after;  
    document.querySelector(".comparison-img").style.backgroundImage = `url(${urlImageBefore})`;
    document.querySelector(".comparison-divisor").style.backgroundImage = `url(${urlImageAfter})`;
  }

  let divisor = document.querySelector(".comparison-divisor"),
      handle = document.querySelector(".comparison-handle"),
      slider = document.querySelector(".comparison-slider");

  function moveDivisor() {
    handle.style.left = slider.value+"%";
    divisor.style.width = slider.value+"%";
  }
  window.onload = function() {
    moveDivisor();
  };  
}

Partie CSS

Toujours dans le dossier Assets – Trouver cette fois ci un fichier .css, scss ou .css.liquid ou scss.liquid (généralement theme.scss ou style.scss etc…).

Mettez-vous tout en bas du fichier et copiez/collez le code suivant:

.comparison-container {  
  margin:15px 0;
  max-width:800px;    
}

.comparison {  
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden; 
  position: relative;
}

.comparison .comparison-img { 
  position: absolute; 
  background-size: cover;      
  font-size: 0;
  width: 100%;
  height: 100%;
  margin: 0; 
}

.comparison-divisor {   
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  bottom: 0; height: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    right: -1px;
    width: 2px;
    height: calc(50% - 25px);
    background: rgba(255,255,255,0.8);
    z-index: 3;
  }
  &::before {
    top: 0;
    box-shadow: 0 -3px 8px 1px rgba(0,0,0,.3);

  }
  &::after {
    bottom: 0;
    box-shadow: 0 3px 8px 1px rgba(0,0,0,.3);

  }
}
.comparison-handle {
 
  position: absolute;
  height: 50px;
  width: 50px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 1;

  &::before,
  &::after {
    content: '';
    width: 0;
    height: 0;
    border: 4px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -5px;
  }
  &::before {
    border-right: 5px solid white;
    left: 50%;
    margin-left: -16px;
  }
  &::after {

    border-left: 5px solid white;
    right: 50%;
    margin-right: -16px;
  }
}

.comparison input[type=range]{
  max-width: inherit !important;
  border:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  outline:none;
  position: absolute;
  top: 50%; 
  left: -25px;
  transform: translateY(-52%);
  background-color: transparent;
  width: calc(100% + 50px); 
  padding:0;
  z-index: 2;

  &:focus,
  &:active {
    border: none;
    outline: none;
  }
}
.comparison input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid white;
  box-shadow: 0 0 8px 1px rgba(0,0,0,.3);
}
.comparison input[type=range]::-moz-range-track {
  -moz-appearance:none;
  height:15px;
  width: 100%;
  background-color: transparent; 
  position: relative;
  outline: none;    
}

Partie HTML / JS & Configuration

Vous avez donc 2 possibilités de placement sans modifier le fonctionnement du code, faites donc copiez/collez du code suivant ou vous voulez 😉

  1. Le mettre dans une section HTML de votre thème
  2. Le mettre dans l’éditeur d’une fiche produit en cliquant sur le mode code, le petit bouton <> en haut à droite 😉
<div class="comparison-container">
  <div class="comparison">
    <figure class="comparison-img">
      <div class="comparison-handle"></div>
      <div class="comparison-divisor"></div>
    </figure>
    <input type="range" min="0" max="100" value="50" class="comparison-slider" oninput="moveDivisor()">
  </div>
</div>

<script>
  window.addEventListener("DOMContentLoaded", () => {

  let urlImageAvant = "https://cdn.shopify.com/s/files/1/0059/9198/9282/files/photoshop-face-before.jpg?v=1612783634";
  let urlImageApres = "https://cdn.shopify.com/s/files/1/0059/9198/9282/files/photoshop-face-after.jpg?v=1612783620";

  imageBeforeAfter(urlImageAvant,urlImageApres);
  });
</script>

Administrer le système Avant / Après

Dans la partie HMTL que vous venez de copiez/collez nous avons 2 images d’exemple !

Il suffit donc de remplacer les 2 urls des 2 variables « urlImageAvant » et « urlImageApres » par vos images.

Comment mettre les images sur Shopify et trouver leurs urls ?

C’est très simple car Shopify propose un espace hébergement d’images que vous trouverez dans « Paramètres – Fichiers ». Téléchargez vos 2 images et copiez/collez les urls créées et remplacez les urls de l’exemple dans casser les doubles guillemets !!!

Et voila le système est en place !

Bonus

Il est possible de limiter la taille du conteneur de l’image en modifiant la valeur au niveau du CSS et du sélecteur .comparison-container. Pour ce faire il suffit de repérer le partie : max-width:800px;  et de mettre la valeur souhaitée. De plus si vous souhaitez centrer la zone vous pouvez modifier la valeur: margin:15px 0; par margin:15px auto;

Ce tuto existe également en vidéo

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

Cet article a 1 commentaire

  1. Bonjour

    J ‘ai mis votre code mais ça ne marche pas

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