Comment créer une modale de quick view sur Shopify (2026)

À retenir

• Une modale de quick view (aperçu rapide) permet aux acheteurs de prévisualiser un produit - image, prix, sélecteur de variantes, bouton d’ajout au panier - dans un overlay depuis une grille de collection, sans quitter la page.
• La version native propre est un petit composant web qui récupère la carte produit avec la Section Rendering API et l’ajoute au panier avec /cart/add.js. Aucun widget tiers.
• Le quick view peut booster la conversion sur des pages de collection faibles, mais il ajoute du JavaScript et peut servir de cache-misère à une liste de produits qui a juste besoin de meilleures infos.
• L’accessibilité n’est pas optionnelle : il vous faut un focus trap, la touche ÉCHAP pour fermer, aria-modal, et le retour du focus sur l’élément déclencheur.
• Fudge construit tout ça comme du code natif de thème à partir d’une simple description, donc rien ne s’affiche par-dessus votre thème et rien ne casse en cas de désinstallation.

Une modale de quick view Shopify ouvre un aperçu du produit dans un overlay quand un acheteur clique sur un bouton dans une collection ou une grille. Il y voit l’image, le prix, les options et un bouton d’ajout au panier sans avoir à charger toute la page produit.

Bien fait, ça raccourcit le chemin vers le panier sur les boutiques où l’on navigue beaucoup. Mal fait, ça ralentit la page de collection et camoufle une grille de produits qui manquait d’infos dès le départ. Ce guide couvre les deux cas, puis vous montre la façon native d’en créer une.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement Shopify et a déployé des fonctionnalités de vitrine pour des centaines de marques. Nous développons Fudge, un éditeur de vitrine en code natif noté 4.9 sur le Shopify App Store. Nous sommes intégrés à la même couche de thème que celle où s’affichent tous les widgets de quick view, ce qui nous permet de constater directement leur coût en matière de vitesse et d’accessibilité.

Ce qu’est une modale de quick view, et quand elle s’avère utile

Une quick view est un overlay déclenché depuis une carte produit sur une page de collection. Au lieu de naviguer vers la page produit (PDP), l’acheteur obtient une version compacte sur place.

Une quick view classique comprend :

• Une ou deux images du produit
• Le titre et le prix
• Le sélecteur de variantes (taille, couleur)
• Un bouton d’ajout au panier
• Un lien vers la PDP complète pour tout le reste

C’est particulièrement utile quand les acheteurs comparent plusieurs produits similaires et que la seule chose qui leur manque avant de passer à l’achat est la taille ou une deuxième photo. Les vêtements, les accessoires et les compléments alimentaires avec des choix de variantes simples en sont de bons exemples.

Cela permet par ailleurs de retenir votre trafic sur la page de collection : un acheteur peut regarder trois produits de suite sans se taper trois temps de chargement de page et de retours en arrière.

Sur le même sujet : comment personnaliser une page produit Shopify, qui couvre la PDP complète vers laquelle la modale renvoie.

Quand la modale de quick view pose problème

La quick view n’est pas une solution miracle. Les recherches de Baymard Institute sur les listes de produits montrent que la quick view ne performe bien que sur les sites qui affichaient beaucoup trop peu d’informations dans leur mode liste à la base. Ils en concluent que cet overlay est souvent un cache-misère pour une grille produit faiblarde, et qu’il vaut bien mieux ajouter ces informations de base directement sur la carte.¹

Donc, avant de vous lancer, demandez-vous si le vrai souci n’est pas simplement une carte de collection trop basique. Si vos cartes affichent déjà le prix, une image claire et des pastilles de couleur (swatches), une quick view n’apportera pas grand-chose.

Il y a deux autres coûts à prendre en compte.

Vitesse de page. Une quick view ajoute du JavaScript et, dans la plupart des versions sous forme d’app, son propre CSS sur chaque page de collection. Les collections sont déjà lourdes en images, et la vitesse est directement corrélée à la conversion. Si vous passez par une app, testez-la. Jetez un œil à comment accélérer un thème Shopify pour connaître la marche à suivre niveau mesures.

SEO de la PDP. Une quick view est un bonus qui accompagne la page produit, pas un remplacement. Conservez de vraies PDP avec leurs URLs indexables et leurs données structurées. Si vous cachez du contenu produit derrière une modale qui ne se charge qu’au clic, vous risquez de l’exclure de l’indexation. La modale est un raccourci pour les acheteurs, pas un endroit où enterrer votre copywriting.

Une quick view se mérite quand elle accélère vraiment la comparaison lors d’achats. Elle ne corrige absolument pas une page de collection dépourvue des bases.

Comment créer une modale de quick view sur Shopify

Le modèle natif comporte trois éléments : un trigger (déclencheur) sur chaque carte produit, une coquille pour la modale présente une seule fois en dur dans le thème, et un script léger qui récupère le contenu du produit et gère l’ajout au panier. Construire tout ça sous forme de web component permet de garder des références DOM hyper clean.

Ajouter un trigger à la carte produit

Les cartes produits s’affichent via un petit composant (snippet), souvent nommé card-product.liquid ou autre dans votre thème. Ajoutez un bouton qui transporte le handle du produit pour que la modale sache quoi charger.

<button
  class="quick-view-trigger"
  data-product-handle="{{ card_product.handle }}"
  aria-haspopup="dialog"
>
  Quick view
</button>

Rien ne se charge encore. Le handle est tout ce que le déclencheur a besoin de porter.

Récupérer la carte produit avec la Section Rendering API

Plutôt que de recréer le formulaire produit en JavaScript, récupérez une section rendue depuis Shopify et injectez son HTML dans la modale. La Section Rendering API renvoie le HTML d’une section dans le contexte de n’importe quelle page.²

Créez une section (par exemple quick-view.liquid) qui fait le rendu du formulaire produit, des sélecteurs de variantes, du prix et de l’image. Ensuite, appelez-la pour un produit spécifique en utilisant section_id :

const handle = trigger.dataset.productHandle
const url = `${window.Shopify.routes.root}products/${handle}?section_id=quick-view`
const res = await fetch(url)
const html = await res.text()
modal.querySelector('.qv-body').innerHTML = html

Utiliser window.Shopify.routes.root permet de garder la bonne URL selon les langues et sous-dossiers. Comme la section fait son rendu sur la propre URL du produit, tous les objets Liquid du produit sont dispos, ce qui vous donne les vraies données de variantes et les vrais prix sans avoir à les reconstruire à la main.

Gérer la sélection des variantes

La section récupérée contient déjà les inputs de variantes. Pour garder le prix et la variante sélectionnée synchros, chargez le JSON du produit et faites correspondre les options choisies.

const product = await fetch(`${window.Shopify.routes.root}products/${handle}.js`).then((r) => r.json())

// À chaque changement, on trouve la variante dont les options correspondent à la sélection
const match = product.variants.find((v) => v.options.every((opt, i) => opt === selectedOptions[i]))

Depuis match, vous obtenez l’id de la variante pour l’ajout au panier et le price à afficher. C’est le même JSON que le code du thème de Shopify lit, donc ça reste précis même quand le stock et les prix changent.

Ajouter au panier avec /cart/add.js

Le bouton d’ajout au panier fait un appel vers la Cart AJAX API. Un POST vers /cart/add.js ajoute la variante sélectionnée sans recharger la page.³

await fetch(`${window.Shopify.routes.root}cart/add.js`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({items: [{id: variantId, quantity: 1}]}),
})

Un détail très utile : /cart/add.js accepte un paramètre sections, donc une seule requête peut ajouter l’article et renvoyer le HTML mis à jour du tiroir de panier ou du compteur d’articles. Ça vous permet de mettre à jour l’UI du panier avec le même appel au lieu de lancer un deuxième fetch.³

Accessibilité : une modale vient avec de vraies exigences

Une modale qui coince les utilisateurs naviguant au clavier ou qui ne se montre pas aux lecteurs d’écran est une modale cassée. L’overlay doit respecter les standards des dialogs.

• Marquez-la comme dialog. Précisez role="dialog" et aria-modal="true" sur l’overlay, et donnez-lui un nom accessible avec aria-labelledby qui cible le titre du produit.
• Faites un focus trap. Tant que la modale est ouverte, les touches Tab et Shift+Tab doivent cycler uniquement sur les éléments qui s’y trouvent. Rien d’autre ne doit être accessible en arrière-plan.
• Close on ESC. La touche Échap doit obligatoirement refermer la modale, en plus d’un bouton de fermeture apparent et du clic sur le fond (backdrop).
• Retournez le focus. Quand la modale se ferme, repassez le focus directement sur le bouton de Quick view qui a servi à l’ouvrir, pour que les utilisateurs au clavier ne perdent pas leur position sur la grille.
• Bloquez le scroll. Verrouillez le défilement du body tant que l’overlay est ouvert.

Construire la modale avec un web component rend tout ça beaucoup plus simple à gérer : le processus d’ouvertures/fermetures se traite dans connectedCallback, vous gardez une référence à l’élément déclencheur et vous lui rétablissez le focus au moment de clore l’action.

Performance : charger tard, et pas sur chaque carte

L’intérêt même d’une quick view native est d’éviter le surpoids lié à une énième application. Vous vous devez de rester léger.

• Ne rien fetcher tant que la page se charge. Le contenu produit ne se doit d’être appelé qu’au moment précis du clic sur la Quick view par l’acheteur, et non préchargé pour chacune des cartes de la page.
• Defférez le script. Chargez le JavaScript de la modale en utilisant defer, ou en lazy-loading, pour que ça ne vienne pas bloquer le rendu de votre collection.
• Générez une seule coquille qui servira à tout. Laissez une et une seule coquille de modale dans votre DOM et ne remplacez que son contenu interne par produit, plutôt que d’injecter une nouvelle modale brute sur chaque carte de votre grille.
• Gérez le cache pendant la session. Si un acheteur s’amuse à ouvrir le même produit deux fois de suite, vous pouvez stocker en cache l’HTML récupéré afin que ce second lancement soit complètement instantané.

Tout ça permet d’exhiber une page bien plus rapide pour tous ceux qui refuseront de ne serait-ce qu’effleurer votre quick view, mais préserve les bonnes fonctionnalités du bout à l’attention de ceux que cela intéresse.

Ce qu’il faut prendre en compte sur mobile

Sur un smartphone, un bouton de quick view rentre en pure compétition frontale avec le tap classique capable d’envoyer aussitôt l’utilisateur sur votre PDP. Sur ce format si serré, l’overlay accapare quasiment 100% de la hauteur.

Deux appels pratiques :

• Pensez à oublier la quick view sur mobile et rediriger en un clic depuis votre carte vers la page produit complète. Un overlay n’en vaut pas souvent la peine quand une seule tape et un chargement minime suffit.
• Si vous insistez sur sa présence, mobile oblige, faites-en un « bottom sheet » propre (un panneau qui défile depuis le bas de l’écran) doté d’une cible de taille XXL sur son bouton close, avec des petites bulles de choix variantes super faciles à cibler sous les pouces. Malsaine sera toujours la compression pure bureau sur de trop petits téléphones.

Quick view vs PDP, page produit complète

Ils servent des objectifs différents. Utilisez ce tableau pour décider quoi mettre où.

Règle générale : le quick view accélère la navigation. La PDP conclut toujours la vente. Ne déplacez jamais le contenu d’un produit depuis la PDP vers une modale.

Pour voir plus globalement comment ces éléments jouent sur la conversion, consultez notre guide CRO Shopify. Si votre but est un bouton d’achat permanent plutôt qu’un overlay, une barre d’ajout au panier sticky est souvent le levier le plus simple.

Là où Fudge intervient

Tout ce qu’on a vu plus haut, c’est du vrai boulot : une nouvelle section, un composant web, la logique de match des variantes, la gestion du focus et les tests cross-browser. La plupart des boutiques utilisent une app tierce de quick view pour éviter ça, et héritent d’un abonnement mensuel, d’un widget hors-marque et d’un script lourd sur chaque page de collection.

Fudge est un éditeur de boutique IA qui code la fonctionnalité comme du code natif de thème. Vous décrivez ce que vous voulez :

“Ajoute un bouton quick view à mes cartes produit qui ouvre une modale avec l’image du produit, le sélecteur de variantes et l’ajout au panier, qui se ferme avec ÉCHAP et remet le focus sur le bouton.”

Fudge le construit dans votre thème en utilisant la Section Rendering API et /cart/add.js, avec la gestion de l’accessibilité en place. Aucun widget ne s’affiche par-dessus votre thème, aucun bundle JavaScript supplémentaire n’est chargé sur chaque page, et comme c’est du code natif, ça survit à la désinstallation. Vous pouvez l’affiner avec des prompts de suivi, exactement comme vous le feriez avec tout ce qui est fait dans l’éditeur de boutique Shopify ou le page builder Shopify.

FAQ