Avez-vous remarqué que sur certaines boutiques Shopify, lorsqu’on survol avec la souris l’image d’un produit, celle-ci change. Et bien dans ce tutoriel vous allez pouvoir le faire sans passer par la moindre application.

L’effet de survol d’image attire l’attention et permet d’augmenter l’attrait pour les éléments de votre page. Cet effet de survol sera visible sur les pages de collections et tous les blocs de recommandation de produits (cross-sell et up-sell).

Depuis votre interface administrateur Shopify, accédez à votre boutique en ligne et allez dans Thèmes. À côté du thème utilisé, cliquez sur Actions et sélectionnez “Dupliquer”. De cette façon, vous aurez une sauvegarde de votre thème si vous manquez une étape qui a un impact négatif sur votre boutique.

Maintenant que vous avez une version de sauvegarde de votre thème en direct, cliquez à nouveau sur Actions, mais cette fois choisissez “modifier le code”. Dans la navigation de gauche, faites défiler jusqu’au répertoire Assets et sélectionnez theme.css (ou équivalent theme.css.liquid ou theme.scss.liquid cela dépend de votre thème).

A la fin de votre fichier, collez le code suivant

/* ===============================================
// change image on hover
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
@media screen and (min-width:767px){
 .has-secondary.grid-view-item__link img.secondary{
   display:none;
 }
 .has-secondary.grid-view-item__link:hover img.secondary{
   display:block;
 }
 .has-.grid-view-item__link:hover img.grid-view-item__image{
   display:none;
 }
}
@media screen and (max-width:767px){
 .has-secondary.grid-view-item__link img.secondary{
   display:none;
 }
}

Cliquez sur Enregistrer.

Dans le répertoire Snippets, ouvrez le fichier qui gère l’affichage en card des produits, dans mon cas c’est product-card.liquid dans d’autres thèmes cela peut être product-card-grid.liquid. 

Faites une recherche sur le terme <img pour trouver la ligne où il affiche l’image du produit, tout juste après ajoutez cette ligne :

{% if product.images.size > 1 %}
                   < img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}" />
               {% endif %}

Cliquez sur Enregistrer une nouvelle fois.

Cette nouvelle fonctionnalité fantastique ne manquera pas de générer plus d’intérêt pour vos produits et votre boutique en ligne, ce qui vous rapportera à coup sûr plus de conversions.