Product — Quick View Modal

A short product page shown over collection and search grids, so the shopper never leaves the page. It loads over AJAX.

Overview

Sections

• Only main-product, in a compact modal context

Step-by-step user journey

Step 1 — Browse the grid

1. Look at a product tile in a collection or search results
2. The Quick view control appears immediately on hover desktop (no longer waits for the modal network preload). On touch devices the control stays hidden; the card link opens the PDP.
3. Preload of modal content still starts on hover so open is fast; if the customer clicks before load finishes, the modal opens as soon as it is ready.

Step 2 — Open the modal

1. Click Quick shop
2. The theme fetches the product.modal template over AJAX
3. The modal overlay opens with the gallery and form

Step 3 — Configure and add

1. Select a variant
2. Add to cart
3. The cart drawer updates
4. Close the modal, or follow the link to the full product page

Step 4 — Close

1. Close (X), click the overlay, or press Esc
2. Return to the grid at the same scroll position

Notes

• Full product page features such as recommendations and testimonials are not in the modal
• Size chart, if present on the product form, uses the same main-product size chart rules (metafield image, fallback page, hide-by-collection) as the full PDP — Size chart reference
• The "View full details" link is useful for complex products
• Quick shop is turned on or off globally in the theme settings

Theme Editor settings

Each section below links to its full settings reference — every setting with id, type, default and a screenshot of the panel.

Full index: settings reference

Related files

templates/product.modal.json
sections/main-product.liquid
snippets/product-grid-item.liquid
assets/theme.js (quick shop / modal handlers)

See also: 03-product-default.md, 10-collection-default.md