So baust du ein Shopify Quick View Modal (2026)

Das Wichtigste in Kürze

• Ein Quick View Modal (Schnellansicht-Modal) ermöglicht es Käufern, eine Produktvorschau – Bild, Preis, Variant Picker, Add-to-Cart – in einem Overlay auf der Collection-Seite anzusehen, ohne die Seite jemals zu verlassen.
• Der saubere, native Ansatz ist eine kleine Web Component, die die Product Card mit der Section Rendering API abruft (fetcht) und sie via /cart/add.js zum Warenkorb (Cart) hinzufügt. Kein Third-Party-Widget.
• Eine Quick View kann die Conversion auf schwachen Collection-Seiten steigern, fügt aber JavaScript hinzu und verdeckt möglicherweise nur eine Produktliste, die einfach bessere Informationen auf den Cards benötigt hätte.
• Accessibility ist nicht optional: 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 dein Theme gerendert wird und bei einer Deinstallation nichts kaputt geht.

Ein Shopify Quick View Modal öffnet eine Produktvorschau in einem Overlay, wenn ein Käufer auf einen Button in einer Collection oder einem Produktraster klickt. Er sieht 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 Shops, durch die viel gestöbert wird. Schlecht gemacht verlangsamt es die Collection-Seite und kaschiert ein Produktraster, das von Vornherein mehr Details gebraucht hätte. Dieser Guide beleuchtet beide Seiten und zeigt anschießend den nativen Weg, wie man eine Quick View baut.

Warum du uns vertrauen kannst

Jacques hat über 15 Jahre Erfahrung in der Shopify-Entwicklung und hat Storefront-Features für Hunderte von Brands veröffentlicht. Wir entwickeln Fudge, einen Native-Code Storefront-Editor mit einer 5.0-Sterne-Bewertung im Shopify App Store. Wir sitzen auf demselben Theme-Layer, neben dem jedes Quick-View-Widget gerendert wird, und sehen daher die Speed- und Accessibility-Kosten 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 die Product Form komplett mit JavaScript neu zu bauen, fetch dir lieber eine gerenderte Section von Shopify und setz ihren HTML-Code in das Modal ein. Die Section Rendering API gibt das HTML einer Section im Kontext jeder beliebigen Seite zurück.²

Erstelle eine Section (z. B. quick-view.liquid), die die Product Form, die Variant Pickers, den Preis und das Bild rendert. Frag sie dann für ein bestimmtes Produkt mit der section_id ab:

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 Einbindung von window.Shopify.routes.root sorgt dafür, dass die URL auch über verschiedene Locales und Unterordner hinweg reibungslos funktioniert. Da die Section direkt über die produktspezifische URL angerufen wird, stehen ganz normal alle Liquid-Objekte zur Verfügung. Du bekommst also echte Variantendaten und Preise, ohne irgendetwas künstlich rekonstruieren zu müssen.

Variant Selection handhaben

Die angefragte Section bringt die form-typischen Variant Inputs bereits mit. Um den Preis und die ausgewählte Variante bei Änderungen synchron zu halten, lädst du einfach die JSON des Produkts und gleichst sie mit den getroffenen Optionen ab.

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

// Nach einer Änderung im Input: Finde die Variante, deren Optionen der Auswahl entsprechen
const match = product.variants.find((v) =>
  v.options.every((opt, i) => opt === selectedOptions[i]),
)

Von match erhältst du die Variant id für den Add-to-Cart Call und den price für die Anzeige. Dies ist exakt das JSON-Objekt, das auch Shopifys eigener Theme-Code ausliest, also bleiben die Daten in jedem Fall korrekt abgebildet, sobald sich Inventar oder Preise anpassen.

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

Der Add-to-Cart-Button postet an die Cart AJAX API. Ein POST an /cart/add.js legt die ausgewählte Variante ohne einen störenden Page Reload in den Warenkorb.³

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 interessantes Detail am Rand: /cart/add.js unterstützt auch einen sections-Parameter. Somit kann ein einzelner Request den Artikel hinzufügen und beispielsweise das neu gerenderte Cart-Drawer- oder Cart-Count-HTML als Rückantwort liefern. So updatest du die Cart-UI direkt über denselben Call und musst keinen zweiten Fetch abschicken.³

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)

Beide bedienen komplett unterschiedliche Zwecke. Greife auf diesen Leitfaden zurück, um sinnvoll abzuwägen.

Faustregel: Die Quick View hilft vor allem beim Scrollen der Kategorie. Die eigentliche Kaufabwicklung bestärkt weiterhin maßgeblich die PDP. Zieh deshalb niemals primäre Produktinhalte von der Verkaufsseite komplett auf ein verstecktes Modal um.

Für den großen Blick darauf, wie derartige Feinheiten an der Conversion-Performance schrauben, schau gerne in unseren umfassenden Shopify CRO Guide. Suchst du vielmehr statt eines Overlays einen persistent eingeblendeten Kaufen-Button, so ist oft auch eine gezielte Sticky Add-to-Cart Bar das unkompliziertere Medium.

Wo Fudge ins Spiel kommt

Alles obige erfordert reale Arbeit: Eine eigenständige Section, eine saubere Web Component, intelligente Logik beim Variant-Matching, cleveres Focus Management, zudem allgegenwärtiges Cross-Browser-Testing. Daher weichen massenhaft Händler in der Not auf Third-Party Quick-View-Apps aus, die den Aufwand kompensieren – nur um im Ausgleich dafür ewige Monatsrechnungen, ein Off-Brand-Widget und spürbaren Script-Ballast beim Besucher in Kauf zu nehmen.

Fudge als KI-Storefront-Editor tippt dir stattdessen das Feature exklusiv in Form von nativem Theme-Code. Du skizzierst unkompliziert per Textbefehl:

“Füge den Collection Cards einen Quick View-Button hinzu, der ein Modal auftauchen lässt mit dem dazugehörigen Produktbild, Variant Picker und dem Add to Cart Button. Sorge dafür, dass ESC das Overlay schließt und dabei der Tastatur-Fokus ordentlich wiederhergestellt wird.”

Fudge baut es per Section Rendering API sowie /cart/add.js gekonnt in deinen Themesourcecode ein und implementiert die nötigen Accessibility-Mechanismen. Keine überlagernden Widgets, kein pauschales JavaScript-Laden bei Seiten, die das Feature gar nicht anbieten – da reiner nativer Code zum Einsatz kommt, bleibt alles uneingeschränkt beim Theme, ganz unabhängig davon, ob später die App abgestellt wird. Mit Follow-Up Prompts gelingt die nachträgliche Anpassung exakt so, wie jeder das im herkömmlichen Shopify Store Editor oder einem nativen Shopify Page Builder umsetzen würde.

FAQ