Sur la collection en vedette, fais en sorte que les infos du produit glissent par-dessus l'image au survol. Inclus un ajout rapide.
Want more control? See the expanded prompt ›
Sur la collection en vedette de la page d'accueil, remplace la grille de produits par une version où le survol d'une fiche fait glisser le titre du produit, le prix et un bouton d'ajout rapide (Quick add) par-dessus l'image.
- Le survol fait glisser le titre du produit, le prix et l'ajout rapide sur l'image.
- Les appareils tactiles utilisent une interaction au toucher (tap) à la place.
- Survol en pur CSS — aucun framework JS n'est nécessaire.
- Fonctionne sur n'importe quelle grille de fiches produits : En vedette, Collection, Recherche.
Ce que vous essayez de faire
Les grilles statiques placent le nom et le prix sous chaque image, l'acheteur doit donc ouvrir le produit pour l'ajouter. Une grille avec affichage au survol place le titre, le prix et l'Ajout rapide sur l'image lorsque l'acheteur la survole, ce qui lui permet d'ajouter au panier sans charger une autre page.
Points de vigilance
- Appareils tactiles : Fudge utilise un affichage au clic (tap) pour que cela fonctionne sur mobile.
- Variantes épuisées : l'Ajout rapide est désactivé pour les produits en rupture de stock.
- Accessibilité : le focus au clavier déclenche également l'affichage, pas seulement le survol.
- Images en lazy-loading : Fudge conserve votre lazy-loading existant intact.
Comment Fudge procède
Fudge duplique votre thème en ligne en brouillon, construit la section en tant que section Shopify modifiable avec l'emplacement et le comportement demandés par votre prompt, et la connecte à vos vraies données de produits et au style de votre marque. Tout commence en brouillon — prévisualisez sur votre boutique, ajustez via l'Éditeur de thème, et publiez uniquement quand vous êtes prêt. Votre boutique en ligne reste intacte.
Pourquoi les cartes produits avec affichage au survol fonctionnent
Sur les grilles de produits, survoler une carte pour révéler le titre, le prix et le bouton d’Ajout rapide offre aux acheteurs une expérience de navigation plus épurée (moins de bruit visuel) tout en faisant ressortir les éléments d’achat lorsqu’ils sont concentrés dessus.
Quand cela vaut-il la peine de le créer
Créez un affichage au survol pour les catalogues mode et lifestyle où la navigation centrée sur l’image prime. Évitez-le pour les catégories utilitaires où les acheteurs veulent voir les infos d’un seul coup d’œil.
Ce qui fait la différence
- Animation fluide vers le haut — le titre, le prix et le CTA apparaissent au survol.
- CTA d’Ajout rapide — ajout au panier sans friction depuis la grille.
- Variante pour mobile — interaction différente pour les appareils tactiles.
- Ne casse pas la mise en page de la grille — les dimensions de la carte restent les mêmes, survolée ou non.
Associez cela avec la modale d’aperçu rapide du produit et l’image au survol sur les cartes produits.
Fudge crée cela dans le cadre de son travail de merchandising.