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 avoir plus de contrôle sur l’apparence de vos cartes produits (transitions animées, superpositions d’ajout rapide (quick-add), placement sur mesure des badges ou différentes dispositions d’images selon la collection), cela dépasse les options de l’éditeur de thème. Fudge peut intégrer n’importe lequel de ces éléments directement dans votre thème, à partir d’une simple description en langage naturel.
FAQ
Puis-je faire fonctionner l’image au survol sur mobile ?
Pas comme un vrai survol, non : les appareils mobiles n’ont pas d’état hover (survol). Ce qui est possible : une pression longue pour changer, un balayage (swipe) pour avancer, ou une rotation automatique. L’option standard de l’éditeur de thème n’affecte que la version ordinateur (desktop). Pour n’importe laquelle de ces options, décrivez ce que vous souhaitez à Fudge (“faire tourner automatiquement les deux premières images du produit sur les cartes mobiles toutes les 3 secondes”) et il modifiera directement le snippet de la carte produit.
Puis-je choisir quelle image s’affiche au survol au lieu de simplement la deuxième ?
Dans les paramètres natifs du thème, non : c’est toujours la deuxième image de la galerie de médias du produit. Pour contrôler l’image qui s’affiche, réorganisez les médias du produit de sorte que votre image de survol préférée soit en position 2. Pour plus de flexibilité (par ex. pour la choisir via un metafield, ou utiliser une image avec un tag spécifique), il faudra modifier le code.
Pourquoi mon image au survol est-elle déformée ou modifie-t-elle la taille de la carte ?
C’est presque toujours un problème d’aspect ratio (proportions). L’image de survol doit avoir le même ratio que l’image principale, sinon la carte se redimensionne lorsque l’image change. Vous pouvez soit réexporter la deuxième image aux mêmes dimensions, soit définir un ratio fixe pour les deux images en CSS à l’aide de aspect-ratio et object-fit: cover.
Puis-je ajouter un fondu ou une animation à la transition au survol ?
Oui. La plupart des thèmes modernes utilisent déjà une transition d’opacité en CSS lors du changement d’image. Pour la personnaliser, trouvez le CSS de la carte produit dans votre thème (généralement card-product.css ou similaire) et ajustez la propriété transition de l’image de survol - par exemple, transition: opacity 0.3s ease; pour un fondu lent.
Les images au survol risquent-elles de ralentir ma page de collection ?
Légèrement : chaque carte produit charge deux images au lieu d’une. Atténuez cela avec le lazy loading (chargement différé, que les thèmes modernes font par défaut) et des images à la bonne taille. L’impact sur les performances est généralement négligeable pour les collections de moins de 50 produits. Pour les très longues grilles de collection, envisagez de différer le chargement de la seconde image uniquement lorsque la carte entre dans le viewport (la zone d’affichage).
