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 %}

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