So baust du ein Shopify Quick View Modal (2026)

Das Wichtigste in Kürze

• Ein Quick View Modal ermöglicht es Kunden, in einem Overlay auf einem Collection-Grid eine Produktvorschau zu sehen – mit Bild, Preis, Variantenauswahl und Add-to-Cart – ohne die Seite zu verlassen.
• Die saubere native Lösung ist eine kleine Web Component, die die Produktkarte mit der Section Rendering API abruft und den Artikel über /cart/add.js in den Warenkorb legt. Kein Drittanbieter-Widget.
• Ein Quick View kann die Conversion auf schwachen Collection-Seiten steigern, fügt jedoch JavaScript hinzu und kann über eine Produktliste hinwegtäuschen, die eigentlich nur bessere Informationen bräuchte.
• Accessibility ist nicht optional: Du brauchst eine Focus Trap, Schließen per ESC, aria-modal und der Fokus muss zum Auslöser (Trigger) zurückkehren.
• Fudge baut das Ganze als nativen Theme-Code basierend auf einer einfachen Beschreibung, sodass kein Drittanbieter-Widget über dein Theme gelegt wird und bei einer Deinstallation nichts kaputtgeht.

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

Richtig umgesetzt, verkürzt es den Weg zum Warenkorb in Stores, in denen viel gestöbert wird. Schlecht umgesetzt, macht es die Collection-Seite langsamer und kaschiert ein Produkt-Grid, das ohnehin mehr Informationen gebraucht hätte. Dieser Guide behandelt beides und zeigt dann den nativen Weg auf, wie man ein Quick View baut.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Entwicklungserfahrung und hat Storefront-Features für Hunderte von Marken veröffentlicht. Wir entwickeln Fudge, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store. Wir arbeiten auf derselben Theme-Ebene, auf der auch jedes Quick View-Widget gerendert wird, weshalb wir die Kosten für Geschwindigkeit und Accessibility (Barrierefreiheit) aus erster Hand sehen.

Was ein Quick View Modal ist und wann es hilft

Ein Quick View ist ein Overlay, das von einer Produktkarte (Product Card) auf einer Collection-Seite ausgelöst wird. Anstatt zur Produktseite (PDP) zu navigieren, erhält der Kunde direkt vor Ort eine kompakte Version davon.

Ein typisches Quick View enthält:

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

Es hilft am meisten, wenn Kunden mehrere ähnliche Produkte vergleichen und das Einzige, was sie vor dem Hinzufügen zum Warenkorb noch brauchen, eine Größe oder ein zweites Foto ist. Kleidung, Accessoires und Nahrungsergänzungsmittel mit einfachen Varianten sind typischerweise gut dafür geeignet.

Außerdem bleiben die Besucher so auf der Collection-Seite, sodass ein Kunde drei Produkte nacheinander ansehen kann, ohne drei vollständige Seitenladevorgänge und dreimaliges Klicken auf den Zurück-Button.

Für die vollständige PDP, auf die das Modal verlinkt, siehe Wie man eine Shopify-Produktseite anpasst.

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 Beschriebene ist echte Arbeit: eine neue Section, eine Web Component, Logik zur Variantenfindung, Fokus-Management und browserübergreifendes Testen. Die meisten Stores greifen auf eine Quick-View-App von Drittanbietern zurück, um das zu umgehen, und handeln sich dafür eine monatliche Gebühr, ein nicht zur Marke passendes Widget und zusätzliche Skript-Ladezeiten auf jeder Collection-Seite ein.

Fudge, der KI-Operator für Shopify-Stores, schreibt das Feature als nativen Theme-Code. Du beschreibst einfach, was du willst:

“Füge meinen Produktkarten einen Quick View-Button hinzu, der ein Modal mit Produktbild, Variantenauswahl und Add-to-Cart öffnet, per ESC geschlossen wird und den Fokus wieder auf den Button zurücksetzt.”

Fudge baut es über die Section Rendering API und /cart/add.js in dein Theme ein – inklusive funktionierender Accessibility. Das Ganze erhältst du als Entwurf, den du auf deinen Collection-Seiten ausprobieren kannst, bevor du ihn veröffentlichst. Es gibt kein Drittanbieter-Widget, das über deinem Theme gerendert wird, und kein extra JavaScript-Bundle, das auf jeder Seite lädt. Da es nativer Code ist, bleibt es auch nach einer Deinstallation bestehen. Über den Shopify Store Editor kannst du es mit weiteren Prompts verfeinern.

Weil ein Quick View sowohl schaden als auch nutzen kann, vergleicht Fudge die Add-to-Cart- und Conversion-Rate auf diesen Collection-Seiten vor und nach dem Livegang, damit du entscheiden kannst, ob du es behalten oder wieder rückgängig machen willst.

FAQ