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

Points clés à retenir

• Une modale quick view permet aux acheteurs de prévisualiser un produit - image, prix, sélecteur de variantes, ajout au panier - dans une superposition (overlay) depuis une grille de collection, sans quitter la page.
• Une implémentation native propre consiste en un petit web component qui récupère la fiche produit avec la Section Rendering API et l’ajoute au panier avec /cart/add.js. Pas de widget tiers.
• Le quick view peut augmenter la conversion sur les pages de collection faibles, mais il ajoute du JavaScript et peut masquer une liste de produits qui a juste besoin de meilleures informations.
• L’accessibilité n’est pas optionnelle : il faut un focus trap, la touche Échap pour fermer, aria-modal, et le retour du focus sur le déclencheur.
• Fudge construit tout ça en code natif pour votre thème à partir d’une description en langage naturel. Aucun widget tiers ne s’affiche par-dessus votre thème et rien ne casse lors de la désinstallation.

Une modale quick view Shopify ouvre un aperçu du produit en superposition (overlay) quand un acheteur clique sur un bouton dans une collection ou une grille. Il voit l’image, le prix, les options et un bouton d’ajout au panier sans charger la page produit complète.

Bien fait, cela raccourcit le chemin vers le panier sur les boutiques où l’on navigue beaucoup. Mal fait, cela ralentit la page de collection et cache les défauts d’une grille de produits qui manquait d’informations à la base. Ce guide aborde les deux cas, puis montre comment en créer une de façon native.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a déployé des fonctionnalités de storefront pour des centaines de marques. Nous développons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store. Nous intervenons sur la même couche du thème que n’importe quel widget de quick view, ce qui nous permet de voir directement les coûts en termes de vitesse et d’accessibilité.

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

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

Un quick view typique inclut :

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

C’est particulièrement utile quand les acheteurs comparent plusieurs produits similaires et que la seule chose dont ils ont besoin avant d’ajouter au panier est de voir une taille ou une deuxième photo. Les vêtements, accessoires et compléments alimentaires avec des choix de variantes simples sont les candidats idéaux.

Ça permet aussi de garder les visiteurs sur la page de collection : un acheteur peut prévisualiser trois produits de suite sans subir trois chargements de page complets et trois allers-retours avec le bouton retour.

Pour la PDP complète vers laquelle la modale renvoie, découvrez comment personnaliser une page produit Shopify.

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 qui précède demande du vrai travail : une nouvelle section, un web component, la logique de correspondance des variantes, la gestion du focus et des tests sur différents navigateurs. La plupart des boutiques se tournent vers une app tierce de quick view pour éviter ça, et écopent d’un abonnement mensuel, d’un widget qui ne respecte pas leur charte graphique, et d’un script lourd sur chaque page de collection.

Fudge, l’opérateur IA pour les boutiques Shopify, écrit cette fonctionnalité sous forme de code natif dans votre thème. Vous décrivez ce que vous voulez :

“Ajoute un bouton de quick view sur mes cartes de collection qui ouvre une modale avec l’image du produit, le sélecteur de variantes et l’ajout au panier, avec la touche Échap pour fermer et le retour du focus sur le bouton.”

Fudge l’intègre à votre thème en utilisant la Section Rendering API et /cart/add.js, avec la gestion de l’accessibilité déjà en place, sous forme de brouillon que vous pouvez tester sur vos pages de collection avant de le publier. Il n’y a pas de widget tiers qui s’affiche par-dessus votre thème ni de bundle JavaScript supplémentaire chargé sur chaque page. Et comme c’est du code natif, il survit à une désinstallation. Vous pouvez l’affiner avec de nouveaux prompts dans l’éditeur de boutique Shopify.

Parce qu’un quick view peut autant nuire qu’aider, Fudge compare ensuite les ajouts au panier et le taux de conversion sur ces pages de collection avant et après sa mise en ligne, pour que vous puissiez le garder ou revenir en arrière.

FAQ