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

À retenir

• Une modale de quick view permet aux acheteurs d’avoir un aperçu du produit - image, prix, sélecteur de variantes, ajout au panier - dans un overlay depuis une grille de collection, sans quitter la page.
• La version native la plus propre est un petit web component qui récupère la carte produit grâce à la Section Rendering API et l’ajoute au panier avec /cart/add.js. Pas besoin de widget tiers.
• La quick view peut booster la conversion sur des pages de collection faibles, mais elle ajoute du JavaScript et peut parfois masquer une grille produit qui manquait simplement de bonnes infos.
• L’accessibilité n’est pas optionnelle : il vous faut un focus trap, la touche Échap (ESC) pour fermer, aria-modal, et le retour du focus sur le déclencheur.
• Fudge permet de construire tout ça en code de thème natif à partir d’une simple description en texte. Rien ne s’affiche en surcouche de votre thème et rien ne casse en cas de désinstallation.

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

Bien exécuté, ça raccourcit le chemin vers l’achat pour les boutiques qui misent sur la navigation. Mal exécuté, ça ralentit la page de collection et ça sert de cache-misère à une grille produit qui avait surtout besoin de plus de détails à la base. Ce guide aborde ces deux aspects, puis vous montre la méthode native pour en coder 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 storefront pour des centaines de marques. Nous développons Fudge, un éditeur de storefront en code natif noté 5.0 sur le Shopify App Store. Nous opérons sur la même couche de thème que n’importe quel widget de quick view, nous sommes donc aux premières loges pour voir leur impact sur la vitesse et l’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 tout le formulaire produit en JavaScript, récupérez une section rendue via Shopify et injectez son HTML dans la modale. La Section Rendering API renvoie le code HTML d’une section dans le contexte de n’importe quelle page.²

Créez une section (par exemple quick-view.liquid) qui s’occupe de rendre le formulaire du produit, les sélecteurs de variantes, le prix et l’image. Ensuite, demandez-la pour un produit en question 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 une URL correcte peu importe la langue ou vos sous-dossiers. Puisque la section est générée sur l’URL même du produit, tous les objets Liquid du produit sont accessibles. Vous obtenez donc les datas des variantes réelles ainsi que les prix sans avoir à reconstruire cela à la main.

Gérer la sélection des variantes

La section récupérée contient déjà les inputs des variantes. Pour garder le prix et la variante synchronisés, chargez le JSON du produit et vérifiez-le avec les options sélectionnées.

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

// Au moment d'un input change, on cherche la variante dont les options matchent la sélection
const match = product.variants.find((v) =>
  v.options.every((opt, i) => opt === selectedOptions[i]),
)

À partir de match, vous récupérez l’id de la variante pour l’ajout au panier, et le price pour l’affichage. C’est ce même JSON qu’utilise le code natif des thèmes Shopify, vous êtes donc sûr(e) de rester juste au niveau de la disponibilité du stock et du prix.

Ajouter au panier avec /cart/add.js

Le bouton d’ajout au panier poste (POST) la demande à 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 }] }),
})

Une petite astuce intéressante : /cart/add.js accepte aussi un paramètre sections. Du coup, une seule requête permet d’ajouter le produit et de retourner le tiroir du panier mis à jour, ou le compte du panier (cart-count) en HTML. Cela permet d’update l’UI du panier dans la foulée sans avoir à balancer de faire un second 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

Ces deux modes ont leurs objectifs respectifs. Servez-vous des points qui suivent pour trancher.

En règle générale : la quick view accélère le browse. La PDP, c’est là pour la vente au final. Ne passez jamais le cœur d’un argumentaire depuis votre PDP sur les pages de la quick view.

Pour avoir une vue d’ensemble sur l’impact que ces différents éléments peuvent avoir sur la conversion, consultez notre Guide CRO Shopify. Si votre objectif final se cantonne à avoir un bouton d’achat toujours accessible plutôt qu’un gros d’overlay à tout prix, le choix de miser sur une barre d’ajout au panier collante (sticky add-to-cart) se révèle souvent bien plus judicieux.

Là où Fudge intervient

Toutes ces explications sont du vrai boulot pur et dur en réalité : de nouvelles sections en Liquid, faire tourner vos tests sur un vrai web component propre, matcher le changement et cibler de la bonne variable, penser Focus Trap en entier et faire vos tests cross-browser. La grande majorité des sites foncent d’ailleurs sur un ajout de base tierce-partie dans la seconde. Mais ceci vous ramènera d’emblée à re-payer un forfait par mois, récolter au passage d’un peu de gras pas joli à même vos collections pour afficher un bouton qui n’arrive parfois même pas à s’harmoniser avec la marque.

Fudge est un éditeur de storefront IA qui pond ce genre de features directement en code de thème natif. Vous lui décrivez ce dont vous avez besoin :

“Ajoute un bouton de quick view à mes cartes de collection qui ouvre une modale avec l’image du produit, le sélecteur de variantes et l’ajout au panier. Utilise ESC (Échap) pour fermer, et retourne un focus sur le bouton de manière propre à la fermeture.”

Et voilà, Fudge embarque le tout directement dans vos racines avec une Section API propre sur cart/add.js, le gros boulot face à l’accessibilité déjà pris à bras-le-corps. Vous gardez un total contrôle sur votre propre code sans widget pour imposer son lourd Javascript, impossible que l’on se rende compte de sa présence depuis une désinstallation. Envie de modifier la position d’un bouton derrière ? On relance directement le tout comme l’on jouerait sur le bon vieux Shopify store editor ou ce que l’on retrouve avec le Shopify page builder.

FAQ