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]

🤗 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 11 commentaires

  1. 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. Le placement du code doit être mauvais ou alors le thème n’est pas compatible.

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

      Merci,

  2. 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. 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. 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. Hello, peut être que les autres produits n’ont pas d’images ?

  5. 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. 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. <div class="show-reveal" j'ai trouvé ! ajoutez la classe dans la grande div et ça fonctionne !!

    1. Cool, bravo 🙂

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