Points clés
- De nombreux thèmes Shopify modernes prennent en charge l’image au survol nativement - vérifiez 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 aurez besoin de modifier le code ou d’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 considérablement les pages de collection. Les clients obtiennent plus d’informations avant de cliquer, ce qui améliore la qualité du trafic vers les pages de produits individuelles.
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
Pas comme un vrai survol, non - les appareils mobiles n'ont pas d'état de survol (hover). Ce qui est possible : maintenir appuyé pour changer, balayer pour avancer, ou une rotation automatique. Le bouton standard de l'Éditeur de thème n'affecte que le desktop. Pour chacune de ces options, décrivez ce que vous voulez à Fudge ("faire défiler automatiquement les deux premières images de produit sur les cartes mobiles toutes les 3 secondes") et il modifiera le snippet product-card directement.
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 quelle image s'affiche, réorganisez les médias du produit pour que votre image préférée au survol se trouve en position 2. Pour plus de flexibilité (ex. : sélection par méta-champ (metafield), ou en utilisant une image taguée), vous aurez besoin d'une modification de code.
C'est presque toujours un problème de ratio d'aspect (aspect ratio). L'image au survol doit avoir le même ratio que l'image principale, sinon la carte se redimensionne lors du changement d'image. Soit vous réexportez la deuxième image avec les mêmes dimensions, soit vous définissez les deux images avec un ratio fixe en CSS en utilisant aspect-ratio et object-fit: cover.
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 sur l'image au survol - par exemple, transition: opacity 0.3s ease; pour un fondu lent.
Légèrement - chaque carte produit charge deux images au lieu d'une seule. Vous pouvez atténuer cela avec le lazy loading (les thèmes modernes le font par défaut) et des images correctement redimensionnées. L'impact sur les performances est généralement négligeable pour les collections de moins de 50 produits. Pour les grilles de collection très longues, envisagez de lazy-loader la deuxième image uniquement lorsque la carte entre dans le viewport.
