So baust du ein Shopify Quick View Modal (2026)

Das Wichtigste in Kürze

• Ein Quick-View-Modal ermöglicht es Käufern, eine Produktvorschau – Bild, Preis, Variantenauswahl, Add-to-Cart – in einem Overlay direkt aus dem Collection-Grid anzuzeigen, ohne die Seite zu verlassen.
• Die saubere native Lösung ist eine kleine Web Component, die die Produktkarte über die Section Rendering API abruft und mit /cart/add.js in den Warenkorb legt. Kein Drittanbieter-Widget.
• Ein Quick View kann die Conversion auf schwachen Kategorie-Seiten steigern, fügt jedoch JavaScript hinzu und kaschiert möglicherweise nur eine Produktliste, die einfach bessere Informationen benötigt.
• Barrierefreiheit (Accessibility) ist kein Nice-to-have: Du brauchst einen Focus Trap, ESC zum Schließen, aria-modal und der Fokus muss zum Auslöser (Trigger) zurückkehren.
• Fudge baut das Ganze als nativen Theme-Code aus einer einfachen Beschreibung, sodass nichts über deinem Theme gerendert wird und bei einer Deinstallation nichts kaputtgeht.

Ein Shopify Quick-View-Modal öffnet eine Produktvorschau in einem Overlay, wenn ein Käufer auf einen Button in einer Kategorie oder einem Grid klickt. Kunden sehen das Bild, den Preis, die Optionen und einen Add-to-Cart-Button, ohne die vollständige Produktseite laden zu müssen.

Gut umgesetzt, verkürzt es den Weg zum Warenkorb in Stores, in denen viel gestöbert wird. Schlecht gemacht, verlangsamt es die Kategorie-Seite und überdeckt nur ein Produkt-Grid, das eigentlich von vornherein mehr Informationen gebraucht hätte. Dieser Leitfaden behandelt beides und zeigt dir dann den nativen Weg, eines zu bauen.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung und hat Storefront-Features für Hunderte von Marken umgesetzt. Wir entwickeln Fudge, einen nativen Storefront-Editor mit einer 4.9-Bewertung im Shopify App Store. Wir setzen auf exakt derselben Theme-Ebene an, auf der auch jedes Quick-View-Widget gerendert wird – daher kennen wir die Kosten in puncto Speed und Accessibility aus erster Hand.

Was ein Quick View Modal ist und wann es hilft

Eine Quick View ist ein Overlay, das von einer Product Card auf einer Collection-Seite ausgelöst (getriggert) wird. Anstatt auf die Produktseite (PDP) zu navigieren, erhält der Käufer direkt an Ort und Stelle eine kompakte Version davon.

Eine typische Quick View beinhaltet:

• Ein oder zwei Produktbilder
• Titel und Preis
• Variant Pickers (z.B. Größe, Farbe)
• Einen Add-to-Cart-Button
• Einen Link zur vollständigen PDP für alles Weitere

Es hilft am meisten, wenn Käufer mehrere ähnliche Produkte vergleichen und vor dem Hinzufügen zum Warenkorb lediglich eine Größenangabe oder ein zweites Foto benötigen. Kleidung, Accessoires und Nahrungsergänzungsmittel mit einfachen Varianten sind der klassische Anwendungsfall.

Außerdem bleiben die Besucher so auf der Collection-Seite, sodass eine Person drei Produkte hintereinander in der Vorschau ansehen kann, ohne drei komplette Page Loads (Seitenladevorgänge) und drei Klicks auf den Zurück-Button auszuführen.

Passend dazu: Eine Shopify-Produktseite anpassen, was die vollständige PDP abdeckt, auf die das Modal verlinkt.

Wann ein Quick View Modal schadet

Quick View ist kein Selbstläufer. Product-List-Studien des Baymard Instituts haben gezeigt, dass die Quick View normalerweise nur auf Stores gut abschneidet, die von vornherein zu wenig Informationen in der Listenansicht präsentieren. Sie folgern daraus, dass das Overlay oft nur eine Symptombehandlung für ein schwaches Produktraster ist und dass es die bessere Lösung ist, stattdessen die wichtigsten Details direkt auf der Card unterzubringen.¹

Bevor du also loslegst, frag dich, ob das wahre Problem vielleicht eine zu kahle Collection Card ist. Wenn deine Cards bereits den Preis, ein klares Bild und Swatches (Farbmuster) zeigen, bringt eine Quick View weniger, als du denkst.

Es gibt noch zwei weitere Kostenpunkte, die du abwägen musst:

Page Speed. Eine Quick View packt JavaScript und – in den meisten App-Versionen – sogar eigenes CSS auf jede Collection-Seite. Diese Seiten sind ohnehin schon sehr bildlastig, und der Speed schlägt sich direkt in der Conversion nieder. Wenn du den App-Weg gehst, teste es ausgiebig. Schau dir an, wie man ein Shopify-Theme schneller macht, um eine Anleitung zur Messung zu erhalten.

PDP SEO. Eine Quick View ist eine Ergänzung zur Produktseite, niemals ein Ersatz. Erhalte echte, crawlbare PDPs mit eigenen URLs und Structured Data. Wenn du jemals Produktinhalte hinter einem Modal versteckst, das nur auf Klick lädt, riskierst du, dass diese Infos nicht indexiert werden. Das Modal ist ein Shortcut für Käufer, kein Ort, an den du deine Produkttexte abschiebst.

Eine Quick View hat ihre Daseinsberechtigung, wenn sie das Comparison Shopping (Vergleichen von Produkten) beschleunigt. Sie repariert jedoch keine Collection-Seite, der es an Grundlagen mangelt.

Wie man ein Quick View Modal in Shopify baut

Das native Pattern besteht aus drei Teilen: Einem Trigger auf jeder Product Card, einer Modal-Shell, die einmal im Theme verankert ist, und einem kleinen Script, das den Produktinhalt abruft (fetcht) und den Add-to-Cart abhandelt. Es als Web Component zu bauen, hält die DOM-Referenzen sauber.

Einen Trigger zur Product Card hinzufügen

Product Cards werden über ein Snippet gerendert, häufig card-product.liquid oder etwas Ähnliches in deinem Theme. Füge einen Button hinzu, der das Product Handle trägt, damit das Modal weiß, was es laden soll.

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

Bis hierhin wird noch nichts geladen. Das Handle ist alles, was der Trigger transportieren muss.

Die Product Card per Section Rendering API abrufen (fetchen)

Anstatt das Produktformular in JavaScript neu zu bauen, rufst du eine gerenderte Section von Shopify ab und fügst deren HTML in das Modal ein. Die Section Rendering API gibt das HTML für eine Section im Kontext einer beliebigen Seite zurück.²

Erstelle eine Section (zum Beispiel quick-view.liquid), die das Produktformular, die Variantenauswahl, den Preis und das Bild rendert. Fordere sie dann für ein bestimmtes Produkt mit section_id an:

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

Die Verwendung von window.Shopify.routes.root hält die URL über verschiedene Sprachen (Locales) und Unterordner hinweg korrekt. Da die Section auf der eigenen URL des Produkts gerendert wird, stehen alle Liquid-Objekte des Produkts zur Verfügung, sodass du echte Variantendaten und echte Preise erhältst, ohne sie mühsam von Hand rekonstruieren zu müssen.

Variant Selection handhaben

Die abgerufene Section enthält bereits die Varianten-Inputs. Um den Preis und die ausgewählte Variante synchron zu halten, lädst du die JSON-Daten des Produkts und gleichst die gewählten Optionen ab.

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

// On input change, find the variant whose options match the selection
const match = product.variants.find((v) => v.options.every((opt, i) => opt === selectedOptions[i]))

Aus match erhältst du die Varianten-id für den Add-to-Cart und den price für die Anzeige. Dies ist dieselbe JSON-Datei, die auch Shopifys eigener Theme-Code liest. So bleibt alles korrekt, auch wenn sich Lagerbestände und Preise ändern.

Add-to-Cart mit /cart/add.js

Der Add-to-Cart-Button sendet einen POST-Request an die Cart AJAX API. Ein POST an /cart/add.js fügt die ausgewählte Variante ohne Page-Reload hinzu.³

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

Ein nützliches Detail: /cart/add.js akzeptiert einen sections-Parameter, sodass ein einzelner Request den Artikel hinzufügen und das neu gerenderte Cart-Drawer- oder Cart-Count-HTML zurückgeben kann. So kannst du das Cart-UI aus demselben Aufruf heraus aktualisieren, anstatt einen zweiten Fetch zu starten.³

Accessibility: Ein Modal hat echte Anforderungen

Ein Modal, das Keyboard-Nutzer einsperrt oder sich vor Screenreadern verdeckt hält, ist schlicht kaputt. Das Overlay muss sich strikt an das Standard-Dialog-Pattern halten.

• Markiere es als Dialog. Nutze role="dialog" und aria-modal="true" bei dem Overlay und gib ihm über aria-labelledby, das auf den Titel referenziert, auch einen nutzbaren accessible Name.
• Focus Trap. Solange das Modal geöffnet ist, dürfen Tab und Shift+Tab nur zwischen den Elementen innerhalb des Dialogs wechseln. Der Bereich im Hintergrund (außerhalb des Overlays) darf nicht erreichbar sein.
• Mit ESC schließen. Die Escape-Taste muss das Modal auf jeden Fall schließen – als Ergänzung zu einem sichtbaren Close-Button und dem beliebten Klick auf den Backdrop (Hintergrund).
• Fokus zurücksetzen. Wenn das Modal schließt, wechsle den Fokus sofort wieder zurück zur Quick View-Schaltfläche (Trigger), die das Modal geöffnet hat, damit Tastatur-Nutzer nicht ihre letzte Position im Raster verlieren.
• Hintergrund-Scrollen blockieren. Fixiere das Scrollen des Dokuments (Seiten-Body), solange das Overlay aufgeklappt ist.

Die Integration als Web Component erleichtert die Steuerung all dieser Vorgaben massiv: Du kannst das Öffnen und Schließen einfach in der internen connectedCallback abwickeln, dort die Referenz des auslösenden Elements speichern und nach dem Close den Fokus zielsicher wiederherstellen.

Performance: Lade es spät, nicht auf jeder Card

Der ganze Sinn einer nativen Quick View ist es, den potenziellen Datenballast externer Apps zu vermeiden. Halte sie performant!

• Fetche nichts bereits beim Page Load. Der Produktinhalt sollte immer erst punktgenau nach einem Klick auf die Quick View angefordert werden, nicht als Preload auf sämtlichen Cards gebunden.
• Script per defer laden. Binde das JavaScript des Modals strikt mit defer ein oder importiere es lazy, damit es niemals grundlegend das Rendern der Collection-Seite ausbremst.
• Rendere nur eine Modal-Shell und verwende sie wieder. Behalte ein einzelnes Modal-Element aktiv im DOM und tausche nur dessen produktbezogenen Content dynamisch aus, statt für jede Card im Code aufwendig ein frisches Modal reinzuinjizieren.
• Session-basiertes Caching. Wenn eine Kundschaft dasselbe Produkt versehentlich zweimal aufklappt, kannst du den gefetchten HTML-String zwischenspeichern, um den zweiten Load verzögerungsfrei durchzuführen.

Das sorgt dafür, dass die Seite ultraschnell bleibt, selbst wenn die allermeisten User gar kein Quick View-Modal betätigen, wohingegen all diejenigen, die sich für dieses Feature entscheiden, im Flow bleiben.

Mobile Berücksichtigungen

Auf dem Smartphone ist ein Quick view stets in direkter Konkurrenz mit dem unkomplizierten Tap, der einen ohnehin direkt auf die PDP transportieren würde. Da der Screen naturgemäß knapp bemessen ist, schiebt sich das Overlay in den meisten Fällen am Ende fast eh als Full-Height in den Vordergrund.

Zwei praktische Ratschläge hierfür:

• Ziehe in Betracht, die Quick View auf Mobile ganz wegzulassen und leite die Card sofort zur PDP weiter. Ein Modal spart auf Mobile merklich weniger Zeit, wenn die komplette Landingpage sowieso als blitzschneller neuer Screen reagiert.
• Falls du sie doch auf Mobile anbietest, zeige das Modal z. B. konsequent als cleveres Bottom Sheet (Panel am unteren Rand) oder komplett als Full-Screen mit unübersehbarem Close-Button und super leicht klickbaren Tapp-Zielen bei der Variantenauswahl. Ein eingequetschtes Desktop-Format drückt extrem auf die Conversion.

Quick view vs. die vollständige Produktseite (PDP)

Sie erfüllen unterschiedliche Aufgaben. Nutze diese Übersicht, um zu entscheiden, was wohin gehört.

Faustregel: Ein Quick View beschleunigt das Stöbern. Die PDP schließt weiterhin den Verkauf ab. Verschiebe niemals Produktinhalte von der PDP in ein Modal.

Für einen umfassenderen Überblick, wie diese Elemente die Conversion beeinflussen, schau dir unseren Shopify CRO-Guide an. Wenn dein Ziel eher ein dauerhaft sichtbarer Kauf-Button als ein Overlay ist, ist eine Sticky Add-to-Cart-Bar oft der einfachere Hebel.

Wo Fudge ins Spiel kommt

Alles oben Genannte ist echte Arbeit: eine neue Section, eine Web Component, Logik zum Variantenabgleich, Fokus-Management und Cross-Browser-Testing. Die meisten Stores greifen zu einer Drittanbieter-App für Quick Views, um dies zu umgehen, und handeln sich dafür eine monatliche Gebühr, ein Off-Brand-Widget und zusätzliches Script-Gewicht auf jeder Kategorie-Seite ein.

Fudge ist ein KI-Storefront-Editor, der dieses Feature als nativen Theme-Code schreibt. Du beschreibst einfach, was du möchtest:

“Füge meinen Produktkarten einen Quick-View-Button hinzu, der ein Modal mit dem Produktbild, einer Variantenauswahl und einem Add-to-Cart öffnet, mit ESC zum Schließen und der Fokus kehrt zum Button zurück.”

Fudge baut es in dein Theme ein und nutzt dabei die Section Rendering API und /cart/add.js, wobei auch die Barrierefreiheit berücksichtigt wird. Es wird kein Widget über deinem Theme gerendert, kein zusätzliches JavaScript-Bundle auf jeder Seite geladen, und weil es nativer Code ist, bleibt es auch nach einer Deinstallation erhalten. Du kannst es mit Follow-up-Prompts weiter verfeinern, genauso wie du es mit allem machen würdest, was im Shopify Store Editor oder im Shopify Page Builder gebaut wurde.

FAQ