Comment afficher une seconde image au survol d’un produit sur Shopify

Nous allons voir dans ce tutoriel comment faire apparaitre une image au survol d’un produit sur une collection sur un thème Shopify. Même si d’un point de vue performance c’est pas idéal… ce type de tuto a été demandé un bon nombre de fois… alors je m’y colle 😀

Comment installer le code ?

Rendez-vous dans Boutique en ligne – Actions – Modifier le code – Ouvrez le dossier Snippets et essayez de trouver le fichier qui loop sur vos produits généralement nommé comme ceci:

  • product-grid-item.liquid,
  • product-grid-card.liquid,
  • product-item.liquid,
  • ou fichier avec ce genre de nomenclature 😉

Si vous ne trouvez pas demandez au support de votre thème !

Trouvez la balise img et après sa fermeture copiez/collez le code suivant juste en dessous:

{% if product.images.size > 1 %}
 <div class="reveal">
    <img src="{{ product.images[1].src | img_url: '900x' }}" alt="{{ product.images[1].alt }}" />
 </div>
{% endif %}
 <script>
          (function() {
            document.querySelector('.reveal').parentNode.parentNode.parentNode.parentNode.parentNode.classList.add('show-reveal');          
          })();          
        </script>

Le code étant assez compliqué à installer selon les thèmes, je vous invite à visionner la vidéo car par écrit c’est trop galère 🙂

Côté CSS – L’effet d’apparition

Je vous propose 2 choix, une apparition classique et un effet de zoom

Apparition classique

.reveal {  
  position:absolute;
  top:0;  
  opacity:0;
  visibility:hidden;
  transition: all 0.6s;
}
.show-reveal {  
  position:relative; 
  overflow:hidden;
}
.show-reveal:hover .reveal {  
  opacity:1; 
  visibility:visible;
}

Effet Zoom

.reveal {  
  position:absolute;
  transform: scale(0);
  top:50%;
  height:0;
  opacity:0;
  visibility:hidden;
  transition: all 0.6s;
}
.show-reveal {  
  position:relative; 
  overflow:hidden;
}
.show-reveal:hover .reveal {
  top:0;
  transform: scale(1);
  opacity:1;
  height:100%;
  visibility:visible;
}

Ce tutoriel existe aussi en vidéo

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

Cet article a 8 commentaires

  1. Antonio

    1 Mar 2021 Répondre

    Hello,

    Super tuto ! Malheureusement, l’image ne s’affiche que sur le premier produit de la collection et pas sur les suivants. Un petit tips ? 🙂

    Cdlt,

    1. Dgeo Dev

      4 Mar 2021 Répondre

      Le placement du code doit être mauvais ou alors le thème n’est pas compatible.

    2. leo

      9 Mar 2021 Répondre

      Bonjour, C’est pareil
      j’ai recommencé plusieurs fois et cela s’affiche uniquement sur le premier produit,
      Comment faire ?

      Merci,

  2. Antonio

    16 Mar 2021 Répondre

    Hello,

    Après avoir révisé le code, effectivement cela ne marche que sur le premier produit ayant une seconde photo de chaque collection. Mais les autres produits ne sont pas pris en compte.
    Thème: Début

    Cordialement,

  3. vigouroux

    20 Mar 2021 Répondre

    Bonjour,
    et merci pour tous ces tutos 🙂
    effectivement cela ne fonctionne que sur la première image
    pouvez-vous nous aider?
    Thème : début
    Merci et bonne journée

  4. vigouroux

    20 Mar 2021 Répondre

    re-bonjour,
    j’ai oublié de préciser que cela fonctionne bien sur toutes les images à l’étape 1 (quand les 2 images sont les unes sous les autres)
    Merci

    1. Dgeo Dev

      22 Mar 2021 Répondre

      Hello, peut être que les autres produits n’ont pas d’images ?

  5. polo

    28 Mar 2021 Répondre

    Effectivement meme probleme, ça fonctionne bien sur le 1er produit mais pas sur les autres, chaque produit a 5 images. J’utilise le theme début, mais dans ta video tu montre que cela fontionne pour le 1er produit mais pas le 2iem.
    Comment faire ?

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