project· livré
BA111OD · Hotspots
Section Shopify sur mesure permettant de mettre en avant des produits clés via des zones interactives cliquables sur une image éditoriale.
Contexte
Une section Shopify sur mesure pour mettre en valeur des produits clés dans la boutique BA111OD. L’équipe marketing place des hotspots cliquables directement sur une image éditoriale de la montre ; chaque hotspot ouvre un tooltip avec un titre, une description et une image optionnelle.
La démo
La section telle qu’elle tourne en production, intégrée ici avec son vrai HTML, CSS et JS, extraits tels quels du thème Shopify.
Essaie :
- Clique un
+→ le tooltip s’ouvre, le bouton pivote vers× - Clique à nouveau,
Esc, ou le bouton de fermeture → ça referme - Bascule Desktop / Mobile : sur mobile, les tooltips passent en bottom sheet plein écran
Comment c’est fait
Le schema de la section expose l’image de fond (desktop et
mobile), la hauteur, la couleur d’accent, la couleur des icônes,
et des blocs hotspot avec position en % (desktop et override
mobile), titre, description et image de tooltip.
Le rendu utilise des custom properties CSS injectées par Liquid.
Le JavaScript est vanilla, ~240 lignes, zéro librairie : event
delegation, IntersectionObserver pour l’animation d’entrée
staggerée, positionnement du tooltip qui préfère le dessous et
bascule au-dessus s’il manque de place. Sous 600 px, même
composant, même API, mais le tooltip devient une bottom sheet avec overlay sombre, géré en CSS et une poignée de branches JS.
Accessibilité : aria-expanded / aria-controls sur les paires
bouton / tooltip, fermeture par Esc, retour de focus à la
fermeture, prefers-reduced-motion désactive l’animation.
Résultat
Une section activable depuis l’éditeur de thème, sans impact sur les performances du site. L’équipe marketing crée une page éditoriale, ajoute des hotspots, édite positions et contenus, sans intervention technique.