E-commerce

Quick Product View

A product grid where Quick view zooms the card image straight into a modal (shared-element transition) with a gallery, colour and size selection, quantity and add to bag. It is fully keyboard driven: Enter opens, arrows browse images, Tab is trapped inside and Esc returns focus to the card.

Full screen Add this to my project

Use the Live / Loading / Empty / Error switch at the top of the demo to see every state.

Why it matters

Shoppers compare and buy without losing their place in the collection, which shortens the path to cart on category pages and reduces back-and-forth page loads on mobile.

How it works

01The card image is measured and animated into the modal gallery position so the product visibly travels into the quick view.
02Colour, size (with stock levels and a size guide), quantity and wishlist all work inside the modal; Add to bag validates size and updates the bag drawer.
03Accessible by design: dialog role, focus trap, Esc to close, arrow keys for images and radio groups, swipe on touch, and focus returns to the card that opened it.