Quick view
A compact product preview that opens over the grid, so shoppers can check details or add to cart without losing their place.
See it
What it is
Quick view opens a compact product preview over a listing page. It usually carries the main image, title, price, short description, variant choices, and add-to-cart button while preserving the shopper's place in the grid underneath.
Reach for it when people need one or two facts before choosing among similar products. Keep it genuinely quick: if reviews, accordions, a full gallery, and recommendations all move into the overlay, you have built a cramped product page with worse navigation.
Gotcha: the overlay is a modal dialog, not a large tooltip. It must trap focus, close on Escape, return focus to the product card that opened it, and prevent the page behind it from scrolling. Preserve the grid's scroll position and provide a normal link to the full product page.
Ask AI for it
Build quick view with the native HTML dialog element and showModal(). Open it from a product-card button and render the primary image, title, price, short description, stock state, accessible variant radio groups, an add-to-cart button, and a normal link to the full product page. Close on Escape, backdrop click, and the close button; lock background scroll; return focus to the exact trigger; and preserve the product grid's scroll position. Load details on demand, show a fixed-size skeleton, and abort the fetch with AbortController if the dialog closes or another product is opened.