Points clés
- De nombreux thèmes Shopify modernes gèrent nativement l’image au survol - vérifiez via l’Éditeur de thème > paramètres de Collection.
- L’image au survol est toujours la deuxième image dans la section des médias du produit.
- Les thèmes comme Dawn, Sense et Craft incluent cette fonctionnalité par défaut.
- Si votre thème ne la prend pas en charge, vous devrez modifier le code ou utiliser Fudge.
Afficher une deuxième image de produit au survol (généralement une photo lifestyle ou un angle différent) est une petite modification UX qui améliore grandement les pages de collection. Vos clients obtiennent plus d’infos avant de cliquer, ce qui améliore la qualité du trafic vers vos pages produits.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge : un éditeur de boutique par IA noté 5,0 sur le Shopify App Store.
Vérifiez si votre thème gère les images au survol nativement
Avant d’écrire le moindre code, vérifiez si votre thème cache déjà cette fonctionnalité dans ses paramètres.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Accédez à une page de Collection.
Étape 3. Dans la barre latérale gauche, cliquez sur la section Collection (ou « Grille de produits » selon votre thème).
Étape 4. Cherchez un paramètre appelé « Afficher la seconde image au survol », « Image au survol », ou similaire. Il peut se trouver dans une sous-section « Carte produit ».
Étape 5. Activez-le et enregistrez.
Si cette option existe, vous avez terminé. Le thème affichera automatiquement la deuxième image de la galerie de médias de chaque produit lorsqu’un client survolera la carte.
Sur le même sujet : Réorganiser les images de produits sur Shopify.
Sur le même sujet : Ajouter des badges de produits sur Shopify.
Sur le même sujet : Personnaliser une page de collection sur Shopify.
Quels thèmes Shopify gèrent les images au survol nativement ?
Plusieurs thèmes Shopify gratuits et populaires incluent cette fonctionnalité :
- Dawn - oui, sous Collection > Paramètres de la carte produit
- Sense - oui, au même endroit
- Craft - oui
- Crave - oui
- Refresh - oui
- Impulse (payant) - oui
- Prestige (payant) - oui
Les thèmes plus anciens ou trop basiques (et certains thèmes tiers) peuvent ne pas inclure cette option. Si vous ne la voyez pas dans l’Éditeur de thème, votre thème ne la gère pas nativement.
Comment bien configurer l’image au survol
L’image au survol correspond toujours à la deuxième image de la section des médias de votre produit. La première image est l’image par défaut (ou mise en avant) ; la deuxième devient l’état de survol (hover).
Pour que cela fonctionne bien :
- Assurez-vous que chaque produit dispose d’au moins deux images importées.
- Gardez une certaine cohérence pour le style de la deuxième image : la plupart des boutiques utilisent une photo lifestyle, une vue de dos ou un flat lay (prise de vue à plat).
- Conservez les mêmes proportions (aspect ratio) pour les deux images afin que la carte ne change pas de taille au survol.
Si certains produits n’ont qu’une seule image, l’effet de survol ne se déclenchera tout simplement pas pour ces produits (le comportement par défaut prendra le relais sans problème).
Sur le même sujet : Compresser des images sur Shopify.
Que faire si votre thème ne gère pas les images au survol ?
Si le paramètre de l’Éditeur de thème n’existe pas, deux options s’offrent à vous :
Option 1 - Passer à un thème qui le gère. Si vous utilisez un ancien thème, migrer vers Dawn (gratuit) ou un autre thème moderne sera peut-être la solution la plus propre. Vous profiterez ainsi des images au survol et d’une série d’autres améliorations.
Option 2 - L’ajouter via le code. L’intégration nécessite des transitions CSS et une petite modification du code Liquid pour afficher la deuxième image à l’intérieur de la carte produit. C’est tout à fait faisable, mais il faut modifier directement les fichiers de votre thème.
Sinon, vous pouvez simplement décrire ce que vous voulez à Fudge : « Sur les pages de collection, affiche la deuxième image du produit lorsque quelqu’un survole une carte produit. Ajoute un effet de fondu entre les deux images. » Fudge s’occupe de générer le code et vous montre un aperçu avant même de modifier votre boutique en ligne.
Comportement sur mobile
Les effets de survol ne se déclenchent pas sur les écrans tactiles : il n’y a pas d’état hover sur mobile. C’est normal et ce n’est pas un problème en soi. L’image au survol ne s’affichera tout simplement pas sur un téléphone, et l’image par défaut sera utilisée à la place.
Certains thèmes ajoutent un geste de balayage (swipe) sur les cartes produits sur mobile pour accompagner cette fonctionnalité. Cela nécessite du code supplémentaire, au-delà du simple bouton d’activation d’image au survol.
Au-delà des images au survol
Si vous souhaitez un meilleur contrôle de l’apparence de vos cartes produits (transitions animées, superpositions d’ajout rapide, placement personnalisé de badges ou affichages d’images différents selon la collection), cela dépasse largement les options de l’Éditeur de thème. Fudge peut intégrer toutes ces idées directement dans votre thème, à partir d’une simple description en langage naturel.
