À retenir
- De nombreux thèmes Shopify modernes prennent en charge nativement l’image au survol - vérifiez Éditeur de thème > Paramètres de collection.
- L’image au survol est toujours la deuxième image dans la section multimédia 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 aurez besoin de modifications de code ou de Fudge.
La plupart des thèmes Shopify, y compris Dawn, ont un paramètre Afficher la deuxième image au survol (Show second image on hover) dans la section grille de produits de la page de collection. Activez-le et chaque carte affiche la deuxième image du produit lorsqu’un acheteur la survole.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store. Les modifications de cartes produit font partie des choses qu’il prépare dans un thème.
Vérifiez si votre thème gère les images au survol nativement
Avant d’écrire du code, vérifiez si votre thème a déjà cette fonctionnalité cachée dans les paramètres.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Naviguez vers 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. Recherchez un paramètre appelé “Afficher la deuxième 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 survole la carte.
Pour choisir quelle image apparaît en deuxième, consultez Réorganiser les images de produits 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 est toujours la deuxième image dans la section multimédia de votre produit. La première image est l’image mise en avant/par défaut ; la deuxième devient l’état au survol.
Pour que cela fonctionne bien :
- Assurez-vous que chaque produit a au moins deux images importées
- Gardez un style cohérent pour la deuxième image - la plupart des boutiques utilisent une photo “lifestyle”, une vue de dos ou une prise de vue à plat (flat lay)
- Faites correspondre le ratio d’aspect des deux images pour que la taille de la carte ne change pas 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 - il se désactive sans problème.
Pour que l’image supplémentaire reste légère, consultez Compresser les images sur Shopify.
Que faire si votre thème ne gère pas les images au survol ?
Si le paramètre n’existe pas dans l’Éditeur de thème de votre thème, vous avez deux options :
Option 1 - Passer à un thème qui le prend en charge. Si vous utilisez un ancien thème, migrer vers Dawn (gratuit) ou un autre thème moderne peut être la solution la plus propre - vous obtenez les images au survol ainsi qu’une série d’autres améliorations.
Option 2 - L’ajouter via du code. L’implémentation nécessite des transitions CSS et une petite modification Liquid pour afficher la deuxième image à l’intérieur de la carte produit. C’est faisable mais nécessite de modifier directement les fichiers du thème.
Vous pouvez décrire ce que vous voulez à Fudge, l’opérateur IA pour les boutiques Shopify, dans son éditeur de boutique : “Sur les pages de collection, afficher la deuxième image du produit quand quelqu’un survole une carte produit. Faire un fondu entre les deux images.” Fudge génère le code et vous montre un brouillon avant que quoi que ce soit ne change sur 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 plus de contrôle sur l’apparence des cartes produits - transitions animées, superpositions d’ajout rapide (quick-add), placement personnalisé des badges ou différentes mises en page d’images par collection - cela dépasse les options de l’Éditeur de thème. Fudge peut intégrer tout cela directement dans votre thème à partir d’une simple description.
FAQ
Puis-je faire fonctionner l'image au survol sur mobile ?
Pas comme un véritable survol, non - les appareils mobiles n'ont pas d'état de survol. Ce qui est possible : appuyer et maintenir pour échanger, glisser pour faire défiler, ou la rotation automatique. La bascule standard de l'Éditeur de thème n'affecte que l'affichage bureau. Pour n'importe laquelle de ces options, décrivez ce que vous souhaitez à Fudge ("alterner automatiquement entre les deux premières images du produit sur les cartes mobiles toutes les 3 secondes") et il modifie 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 multimédia du produit. Pour contrôler quelle image s'affiche, réorganisez les médias du produit pour que votre image au survol préférée soit en position 2. Pour plus de flexibilité (par ex., la choisir par un champ méta ou utiliser une image taguée), vous aurez besoin d'une modification de 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 de ratio d'aspect. L'image au survol doit avoir le même ratio que l'image principale, sinon la carte se redimensionne lors du changement d'image. Vous pouvez soit réexporter la deuxième image avec les mêmes dimensions, soit définir un ratio fixe pour les deux images en CSS avec 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é 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 sur l'image au survol - par exemple, transition: opacity 0.3s ease; pour un fondu lent.
Les images au survol ralentiront-elles ma page de collection ?
Légèrement - chaque carte produit charge deux images au lieu d'une. Vous pouvez atténuer cela avec le lazy loading (les thèmes modernes le 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.
