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: 4.8 sur 4 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 17 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 ?

  6. Antonio Lacerenza

    20 Juil 2021 Répondre

    bonjour, avez vous trouvé la solution ? je suis sur le thème debut aussi comme le thème de la vidéo et cela ne fonctionne pas sur les autres produit que tous les premiers des page même en modifiant les numéros.

  7. Antonio Lacerenza

    23 Juil 2021 Répondre

    <div class="show-reveal" j'ai trouvé ! ajoutez la classe dans la grande div et ça fonctionne !!

    1. Dgeo Dev

      24 Juil 2021 Répondre

      Cool, bravo 🙂

  8. Lucie

    9 Août 2021 Répondre

    Bonjour, est-ce que vous pouvez svp mettre le code en entier pour faire copier-coller ? Merci !!!

    1. Dgeo Dev

      11 Août 2021 Répondre

      Hello, impossible car chaque thème est codé différemment et cela va tout péter 😀

  9. Dim

    15 Août 2021 Répondre

    Bonjour,
    merci pour les conseils, tes tutos sont très appréciés mais celui-ci… donne du fil à retordre.
    Je me casse la tête sur le commentaire :

    Antonio Lacerenza23 JUIL 2021
    <div class="show-reveal" j'ai trouvé ! ajoutez la classe dans la grande div et ça fonctionne !!

    J’essaie, je charcute le site, j'annule, je réessaie…

    Pourrais tu, s'il te plaît, m'éclairer. Que veut-il dire par la grande div ? à chaque fois pour moi, çà rentre en conflit avec d'autres div déjà présente .

  10. Dim

    15 Août 2021 Répondre

    Problème résolu après avoir lu les commentaires des vidéos youtube.

  11. Alev

    28 Fév 2022 Répondre

    Bonjour,
    Je suis la vidéo et applique les codes aux bons endroits comme indiqué mais j’ai l’effet créer uniquement sur la première image.
    J’essaie d’appliquer le conseil à 3.07min en mettant <div class="show-reveal" sur la grande div avant "grid view item" mais je ne le trouve pas chez moi.
    Theme: Speedfly 3.1
    Merci pour votre aide.

    1. Dgeo Dev

      1 Mar 2022 Répondre

      Bonjour, pas besoin pour speedfly car c’est inclus dans les options 😉 au besoin nous contacter au support ici : speedecom.freshdesk.com – bonne journée

Laisser un commentaire

Fermer le menu