Quick view

A quick-view modal appears when the customer clicks a "Quick view" button on a product card. It shows the product's media gallery, title, price, variant picker, and Add to cart — all without leaving the collection / homepage.

Enable

Theme settings → Product cards → Show quick view button (checkbox). The button appears on hover (desktop) or as a corner icon (mobile).

Theme settings → Product cards → Quick view button styling

• Background color
• Text color
• Hover background / hover text colors
• Border radius (default 999px — pill shape)
• Border width
• Border color

Modal behavior

• Slides in from right on desktop, bottom-sheet on mobile
• Swipe-down to close on mobile
• ESC to close on desktop
• Variant picks update the displayed media if the variant has its own image
• ATC adds to cart and closes the modal (cart drawer opens if cart-type = drawer)
• "View full details" link navigates to the actual PDP

Performance

• The modal HTML is fetched on first open via /products/{handle}?view=quick-view (uses the product.quick-view.liquid template). Subsequent opens of the same product are instant (cached client-side).
• Variants JSON is included in the response so option-switching is local (no extra request).

Tips

• Useful on collection pages and homepage carousels where customers browse 10+ products in a session.
• Hide on PDP-card components where the customer is already deep into a product (recommendations on PDP).