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

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

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