Comment Créer un Système d’images Avant / Après sur Shopify

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 Ressources (Assets) » – Trouver un fichier base.js, global.js, theme.js, style.js ou autre fichier .js que votre thème utilise.

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 Ressources (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 8 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 14 commentaires

  1. marh

    9 Fév 2021 Répondre

    Bonjour

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

  2. Lucas

    23 Avr 2021 Répondre

    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. Francois Pierre CAMBILLARD

    1 Mai 2021 Répondre

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

  4. Kelly

    23 Sep 2021 Répondre

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

    1. Dgeo Dev

      26 Sep 2021 Répondre

      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

  5. BEKLI

    3 Jan 2022 Répondre

    Bonsoir, l’image ne s’affiche pas, seulement le rond au milieu s’affiche… y a t i l une solution pour remedier à ça ?

    Cordialement

    Iliès BEKLI

  6. Antony

    20 Mar 2023 Répondre

    Bonjour, merci pour ce tuto, je n’ai pas la section contenue personnalisé… Donc pas possible chez moi

    1. Dgeo Dev

      22 Mar 2023 Répondre

      Bonjour, il faudra passer à un thème plus complet comme par exemple speedfly 🙂

  7. CharlyKB

    6 Avr 2023 Répondre

    Correction sur ce bout >

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

    1. Dgeo Dev

      7 Avr 2023 Répondre

      Hello, merci 😉

  8. alex

    14 Juin 2023 Répondre

    bonjour, cela ne fonctionne pas, je pense que vous n’avez pas fait la mise à jour du code pour le shopify 2.0

    1. Dgeo Dev

      15 Juin 2023 Répondre

      Hello, pas de notion de 2.0 ou autre sur ce code car c’est du code générique hors shopify donc utilisable partout 🙂 Peut être que votre thème n’est pas compatible 🙁

  9. Charly KB

    14 Mar 2024 Répondre

    Dgeo, tu met du JS dans du CSS ?

    « Partie Javascript
    Rendez-vous dans les fichiers du thème – « Boutique en ligne – Actions – Modifier le code – dossier Ressources (Assets) » – Trouver un fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise. »

    J’ai réessayer de le mettre en place aujourd’hui, ce tuto ne fonctionne plus. Il n’y a qu’une seule image sans comparaison.
    Ou erreur de ma part mais j’aimerais bien savoir où car je cherche depuis une heure.

    1. Dgeo Dev

      14 Mar 2024 Répondre

      Hello, effectivement merci pour l’information ! une erreur de copier / coller j’ai rectifié le texte !
      C’est un tuto qui ne fonctionne pas tout le temps cela dépend du thème et des navigateurs. Sinon des apps existent sur le store shopify, rechercher : before, after image

Laisser un commentaire

Fermer le menu
×
×

Panier