Overlay Quick View Modal

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Overlays > Quick View Modal

Overview

The Quick View Modal lets customers preview a product without leaving the current page. Clicking "Quick view" on a product card opens a modal with product info, variants, add-to-cart, and a mini image gallery. Content is loaded via AJAX (product JSON) when opened.

Where It Appears

Product cards — Collection pages, search results, featured collection, cart recommendations, etc.
Only when Theme settings > Extras > Enable quick view is turned on

Files

File	Purpose
`snippets/quick-view-modal.liquid`	Modal shell, loading state, close buttons
`assets/quick-view.js`	Fetches product JSON, builds HTML, opens/closes, image lightbox
`layout/theme.liquid`	Renders modal when `settings.enable_quick_view` is true

Structure

Quick View Modal (role="dialog", aria-modal="true")
├── Overlay (data-quick-view-close) — click to close
├── Backdrop (data-quick-view-draggable)
│   ├── Drag handle (optional, data-quick-view-drag-handle)
│   ├── Close button (data-quick-view-close)
│   └── Content area (data-quick-view-content)
│       ├── Loading spinner (data-quick-view-loading)
│       └── Body (data-quick-view-body) — populated by JS

Data Attributes

Attribute	Element	Purpose
`data-quick-view-modal`	Modal root	Identifies modal
`data-quick-view`	Product card "Quick view" button	Opens modal for that product
`data-quick-view-close`	Overlay, close button	Closes modal
`data-quick-view-content`	Content wrapper	Where body is injected
`data-quick-view-body`	Body container	Product HTML goes here
`data-quick-view-loading`	Spinner	Shown during fetch

Behavior

Opening

Customer clicks "Quick view" on a product card (data-quick-view with product handle/URL)
Modal opens; loading spinner shows
quick-view.js fetches product JSON from /products/{handle}.js
Builds product HTML (images, title, price, variants, add-to-cart form)
Injects into data-quick-view-body; spinner hidden

Closing

Overlay click — closes
Close button — closes
Escape key — closes

Clicking an image in Quick View opens the Quick View Image Lightbox for zoom
See Quick View Image Lightbox

Theme Setting

Setting	Path	Effect
Enable quick view	Theme settings > Extras	When off, Quick View modal is not rendered; "Quick view" buttons are hidden

Customization

Via Theme Customizer

Theme settings > Extras — Enable/disable Quick View

Via Code

snippets/quick-view-modal.liquid — Modal structure
assets/quick-view.js — buildModalHtml() for product layout; open/close logic

Accessibility

role="dialog", aria-modal="true", aria-labelledby="quickview-title"
Focus moves into modal when opened
Escape closes
tabindex="-1" for focus management

Multipurpose theme documentation