Sur une boutique en ligne, le client ne peut pas toucher le produit. Il ne lui reste que la photo. Si elle ne lui montre pas le détail qu'il cherche, il hésite, et souvent il n'achète pas.

Pour une marque D2C, j'ai développé un zoom produit sur mesure. La fonctionnalité est petite, mais elle porte directement sur la décision d'achat, et je voulais la maîtriser : son comportement, son poids, sa fluidité.

Le principe, dans sa version minimale. Au survol, l'image grossit et le point de zoom suit la souris.

.zoom { overflow: hidden; cursor: zoom-in; } .zoom img { display: block; width: 100%; transform-origin: var(--x, 50%) var(--y, 50%); transition: transform .2s; } .zoom:hover img { transform: scale(2); } 
zoom.addEventListener("mousemove", (e) => { const r = zoom.getBoundingClientRect(); zoom.style.setProperty("--x", ((e.clientX - r.left) / r.width) * 100 + "%"); zoom.style.setProperty("--y", ((e.clientY - r.top) / r.height) * 100 + "%"); });

Trois détails qui font la différence :

  • Une image plus grande que celle affichée. Zoomer sur une miniature donne du flou. Il faut charger la version haute définition.
  • Pas de survol sur mobile. Un toucher doit activer ou désactiver le zoom, sinon la moitié des visiteurs n'y a pas accès.
  • Le zoom ne doit rien déplacer. Si le survol décale la page, le visiteur perd sa place et quitte.

C'est une petite fonctionnalité, mais elle se trouve sur le chemin de l'achat, et c'est pour ça que je voulais la maîtriser.

Amine Affif, développeur full-stack à Paris. amineaffif.com