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 5 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 5 commentaires

  1. Bonjour

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

  2. Bonjour,

    Sur ordinateur, ça fonctionne très bien, mais sur mobile ça ne fonctionne plus. J’utilise un iPhone XS (au cas ou ça peut vous aider de savoir ça) et dans mon cas, les images restes fixent, on voit donc juste les moitié des photos, la barre ne bouge pas non plus, il y a que le rond qui bouge, et ça donc sans faire apparaitre une image plus qu’une autre.

    J’ai évidement essayé avec votre tuto à cette page : https://dgeodev.myshopify.com/products/produit-1
    Mais le problème est là aussi.

    Je vous invite à essayer de votre côté, en espérant que vous ayez bien un iPhone pour essayer (j’ai pas essayer sur un Android j’en ai pas), et j’ai aussi fait essayé une amie, du coup avec un autre iPhone, et elle me confirme que elle aussi a le problème.

    J’espère que vous allez pouvoir m’aider, merci

  3. Bonjour ,
    Pareil que Lucas, sur la preview Shopify cela marche, mais une fois en ligne cela ne fonctionne pas !
    merci beaucoup

  4. Bonjour, savez vous ou mettre les bout de code dans le theme Dawn ?

    1. Hello, oui si c’est dans une fiche produit c’est main-product.liquid sinon il faut le mettre dans une section avec code HTML ou Liquid

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