Multipurpose theme documentation
Multipurpose Fashion Theme
Overlay Quick View Image Lightbox
Multipurpose Fashion Theme
Theme: Multipurpose Fashion Theme
Help Center > Overlays > Quick View Image Lightbox
Overview
The Quick View Image Lightbox is a full-screen image viewer shown when customers click a product image inside the Quick View modal. It displays large product images with previous/next navigation and a close button. It only exists when Quick View is enabled.
Where It Appears
- Inside Quick View Modal — After opening Quick View, click any product image
- Requires Theme settings > Extras > Enable quick view to be on
Files
| File | Purpose |
|---|---|
snippets/quick-view-modal.liquid |
Contains both Quick View modal and
#quickview-image-lightbox
|
assets/quick-view.js |
Opens lightbox, populates track, handles prev/next/close |
Structure
Image Lightbox (id="quickview-image-lightbox", role="dialog", aria-modal="true")
├── Overlay (data-lightbox-close) — click to close
├── Content
│ ├── Slider track (data-lightbox-track) — images injected here
│ └── Nav buttons
│ ├── Previous (data-lightbox-prev)
│ ├── Close (data-lightbox-close)
│ └── Next (data-lightbox-next)
Data Attributes
| Attribute | Element | Purpose |
|---|---|---|
data-image-lightbox |
Lightbox root | Identifies lightbox for JS |
data-lightbox-close |
Overlay, close button | Closes lightbox |
data-lightbox-prev |
Previous button | Previous image |
data-lightbox-next |
Next button | Next image |
data-lightbox-track |
Slider track | Where images are rendered |
Behavior
Opening
- Customer opens Quick View modal
- Clicks a product image in the Quick View content
- Lightbox opens with that image
- All product images are loaded into the track for prev/next
Closing
- Overlay click — closes lightbox (Quick View modal stays open)
- Close button — closes lightbox
- Escape key — closes lightbox
Navigation
- Previous / Next — Cycle through product images
- Keyboard arrows may be supported (check
quick-view.js)
Relation to Product Image Lightbox
-
Product page lightbox — Uses
product-media-gallery.liquid; different data attributes (data-fp-lightbox, etc.) -
Quick View lightbox — Uses
data-lightbox-*; same visual design, different context