À retenir
- De nombreux thèmes Shopify modernes gèrent nativement les images au survol - allez dans Éditeur de thème > Paramètres de collection.
- L’image au survol est toujours la deuxième image dans la section médias du produit.
- Des 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 un petit changement UX qui améliore considérablement les pages de collection. Les clients obtiennent plus d’informations avant de cliquer, ce qui augmente la qualité du trafic vers vos fiches produits.
Pourquoi nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également développé Fudge - un éditeur de boutique IA avec une note de 4.8 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. Ce qui est possible : maintenir enfoncé pour changer, faire glisser (swiper) pour avancer, ou une rotation automatique. L'option standard de l'Éditeur de thème n'affecte que l'affichage sur ordinateur. Pour l'une de ces solutions, décrivez ce que vous voulez à Fudge ("faire défiler automatiquement 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.
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 l'image de survol souhaitée soit en 2ème position. Pour plus de flexibilité (par ex., choisir via un champ méta ou utiliser une image taguée), vous devrez modifier le code.
Il s'agit presque toujours d'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 d'aspect fixe pour les deux images en CSS à l'aide de aspect-ratio et object-fit: cover.
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.
Légèrement - chaque carte produit charge deux images au lieu d'une. Atténuez cela avec le lazy loading (les thèmes modernes le font par défaut) et des images correctement dimensionné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 charger la deuxième image en lazy loading uniquement lorsque la carte apparaît à l'écran.
