Overlay Product Image Lightbox

Multipurpose Fashion Theme

Theme: Multipurpose Fashion Theme

Help Center > Overlays > Product Image Lightbox

Overview

The Product Image Lightbox is a full-screen image zoom shown on the product page when customers click a product image and Enable zoom is turned on. It displays large images with previous/next navigation and a close button. Uses the same design pattern as the Quick View image lightbox.

Where It Appears

Product page — Inside the product media gallery
Only when the product section has Enable zoom enabled

Files

File	Purpose
`snippets/product-media-gallery.liquid`	Renders gallery + lightbox (when `enable_zoom` is true)
Product section (e.g. `sections/main-product.liquid`)	Passes `enable_zoom` from section settings

Structure

Image Lightbox (data-fp-lightbox, role="dialog", aria-modal="true")
├── Overlay (data-fp-lightbox-close) — click to close
├── Content
│   ├── Slider track (data-fp-lightbox-track) — mirrors gallery images
│   └── Nav
│       ├── Previous (data-fp-lightbox-prev)
│       ├── Close (data-fp-lightbox-close)
│       └── Next (data-fp-lightbox-next)

Data Attributes

Attribute	Element	Purpose
`data-fp-lightbox`	Lightbox root	Identifies lightbox (fp = product media)
`data-fp-lightbox-close`	Overlay, close button	Closes lightbox
`data-fp-lightbox-prev`	Previous button	Previous image
`data-fp-lightbox-next`	Next button	Next image
`data-fp-lightbox-track`	Slider track	Image container
`data-fp-gallery-wrapper`	Gallery parent	Product media gallery
`data-zoom-src`	Gallery images	High-res image URL for zoom

Enabling

Customize > Open a product page
Select the Product information or main product section
Find Enable zoom (or similar) and turn it on
Save

Behavior

Opening

Customer clicks a product image in the gallery (when zoom is enabled)
Lightbox opens with the clicked image
High-res image loaded from data-zoom-src (e.g. 2400px width)

Closing

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

Previous / Next — Cycle through all product media (images, videos may differ by theme)

Section Settings

Setting	Typical location	Effect
Enable zoom	Product section	When on, clicking images opens lightbox

Multipurpose theme documentation