Modale produit accessible depuis les cartes collection : contenu, activation, cache performant, comportement mobile et integration panier.
Quick View
Le Quick View permet aux visiteurs de consulter les informations essentielles d'un produit et de l'ajouter au panier directement depuis une page collection, sans changer de page. C'est un outil de conversion puissant qui réduit la friction d'achat en eliminant les allers-retours entre collection et pages produit.
Fonctionnement
- Le visiteur parcourt une page collection ou une grille de produits
- Il clique sur le bouton Quick View d'une carte produit
- Une modale s'ouvre avec les informations essentielles du produit
- Il peut choisir une variante, ajuster la quantité et ajouter au panier
- La modale se ferme et le cart drawer s'ouvre avec le produit ajoute
- Le visiteur reste sur la page collection et peut continuer a naviguer
Contenu de la modale
La modale Quick View affiche les éléments suivants :
| Élément | Description | Configurable |
|---|---|---|
| Galerie | Images du produit en slider navigable avec dots | Toujours présent |
| Titre | Nom du produit (cliquable vers la page complète) | Toujours présent |
| Prix | Prix actuel et prix compare (barre) | Toujours présent |
| Variantes | Selecteurs de variantes (même config que la page produit) | Oui |
| Quantité | Selecteur de quantité +/- | Oui |
| Bouton ATC | Bouton "Ajouter au panier" | Toujours présent |
| Description | Description courte (tronquee) | Oui |
| Lien "Voir les détails" | Lien vers la page produit complète | Toujours présent |
Galerie dans la modale
La galerie dans le Quick View est un slider simplifie (pas de thumbnails, pas de zoom) optimisé pour une consultation rapide.
Selecteur de variantes dans la modale
Les variantes dans le Quick View utilisent la même configuration que la page produit principale. Si vous avez configure des swatches pour la couleur et des boutons pour la taille sur la page produit, le Quick View affichera le même rendu.
Activation
Le Quick View s'active au niveau des cartes produit dans les sections collection.
| Setting | Description | Options |
|---|---|---|
| Type de bouton carte | Comment le Quick View est déclenché | Quick View / Add to Cart / View Product |
Cache performant
Le Quick View utilise un système de cache intelligent pour des performances optimales. Après le premier chargement d'un produit, les affichages suivants sont instantanés.
| Aspect | Detail |
|---|---|
| Stratégie | Les données produit sont mises en cache après le premier fetch |
| Capacité | Jusqu'à 10 produits en cache simultanément |
| Algorithme | LRU (Least Recently Used) : les plus anciens sont supprimés en premier |
| Invalidation | Le cache est vide au changement de page |
| Premier chargement | Requête fetch vers Shopify (Section Rendering API) |
| Chargements suivants | Instantané (depuis le cache mémoire, pas de requête réseau) |
Interaction avec le panier
Quand le visiteur ajoute un produit depuis le Quick View :
- Le produit est ajouté au panier via l'API AJAX (pas de rechargement)
- Un spinner de chargement s'affiche sur le bouton ATC
- La modale Quick View se ferme automatiquement
- Le cart drawer s'ouvre avec le produit ajoute visible
- Le compteur du panier dans le header se met à jour
- Si des upsells sont configurés dans le cart drawer, ils s'affichent
- Si un cadeau gratuit est configure et que le seuil est atteint, il est ajouté
Accessibilité
Le Quick View respecte toutes les bonnes pratiques d'accessibilité :
| Aspect | Implementation |
|---|---|
| Focus trap | Le focus clavier est piege dans la modale quand elle est ouverte |
| Fermeture Escape | La touche Echap ferme la modale |
| Fermeture overlay | Clic sur le fond sombre en dehors de la modale la ferme |
| ARIA | role="dialog", aria-modal="true", aria-label |
| Retour focus | Le focus retourne sur le bouton déclencheur après fermeture |
| Navigation clavier | Les variantes et le bouton ATC sont navigables au clavier |
Comportement mobile
Sur mobile, la modale Quick View s'adapte automatiquement pour une expérience optimale :
| Aspect | Desktop | Mobile |
|---|---|---|
| Taille | Modale centree (60-80% de l'écran) | Plein écran ou bottom sheet |
| Layout | 2 colonnes (galerie à gauche, infos à droite) | Empile (galerie en haut, infos en dessous) |
| Galerie | Slider avec dots | Slider avec dots, swipe natif |
| Fermeture | Bouton X + Overlay + Echap | Bouton X + Swipe down |
| Scroll | Scroll interne dans la modale | Scroll natif du body |
Lien vers la page complète
Le Quick View inclut toujours un lien vers la page produit complète, positionne en bas de la modale. Ce lien est important pour les visiteurs qui veulent plus d'informations avant d'acheter.
Bonnes pratiques
- Activez-le sur les collections : Le Quick View réduit significativement les allers-retours entre collection et page produit. Les visiteurs qui hésitent entre plusieurs produits apprécient de pouvoir les consulter rapidement
- Gardez-le simple : Le Quick View affiche l'essentiel. Les détails complets (description longue, onglets, avis, bundles) sont sur la page produit
- Lien vers la page complète : Le lien "Voir les détails" est toujours présent. Ne le retirez pas : certains clients veulent plus d'information avant d'acheter
- Produits simples = Quick View idéal : Si vos produits ont peu de variantes et une description courte, le Quick View est parfait pour un achat en 2 clics
- Produits complexes = Page produit : Si vos produits ont des bundles, un guide des tailles, beaucoup de variantes ou un contenu riche, le Quick View sera trop limité. Préférez un bouton "View Product" sur la carte
- Testez sur mobile : Le Quick View mobile doit être aussi fluide que la page produit. Vérifiez que les variantes sont faciles a sélectionner et que le bouton ATC est bien accessible
Prochaines étapes
- **Page collection** — Configurez la grille de produits, les styles de cartes et la pagination
- **Options de variantes** — Personnalisez les swatches et boutons qui s'affichent dans le Quick View
- **Cart Drawer** — Configurez le panier latéral qui s'ouvre après un ajout depuis le Quick View
- **Cartes produit** — Personnalisez le bouton Quick View sur les cartes produit