The magnifier, product video, and page-builder placement in depth

Last updated July 10, 2026

Choosing the right magnifier style

The Magnifier tab offers five desktop styles, and the right one depends on how your shoppers inspect products:

• Hover zoom – the classic: move the cursor over the image and the zoomed view follows. Zero clicks, immediate.
• Click zoom – the shopper clicks to enter zoom mode. Because the click is taken, the “open lightbox on click” option is auto-disabled under this style and a fullscreen button takes its place.
• Side panel popout – the zoomed view renders in a panel beside the image, so the shopper sees the full product and the detail at once. Position and advanced dimensions are configurable.
• Lens – a cursor-following loupe over the image itself. Lens shape and size are configurable.
• Off – no on-image zoom; the lightbox can still carry the deep zoom.

Magnification runs from 1.5x to 4x. The zoom cue setting controls the on-image indicator that tells shoppers zoom exists at all – a magnifying-glass icon, a magnification label such as “2.5x”, or off.

The lightbox

The full-screen lightbox supports zoom and pan with mouse wheel, double-click, pinch, and double-tap – and the pop-out zoom anchors to the point you clicked or pinched rather than snapping to center. On mobile, “Tap to open lightbox” is the zoom path (or turn mobile zoom off).

Zoom image source and loading

In classic mode the zoom source is a WordPress image size, defaulting to the plugin-registered 1600px size. In headless mode it is expressed as a width (default 1600) plus a use-original opt-in – never a pre-transformed CDN URL, so a headless frontend resolves images against its own pipeline. Zoom loading chooses Lazy (load the big image when needed) or Prefetch (fetch it early so zoom is instant). The thumbnail swap trigger decides whether gallery thumbnails swap the main image on click or on hover. Use the live preview (Desktop | Mobile) on the tab to see every choice before saving.

Authoring product video

Each product’s videos live in a drag-to-reorder metabox on the product edit screen:

• Sources: pick a file from the Media Library, paste a direct URL, or add a YouTube/Vimeo embed row (privacy modes: YouTube nocookie, Vimeo Do-Not-Track). Alternate sources let one video carry multiple formats for browser fallback.
• Format policy: MP4 (H.264), WebM, OGG play everywhere; MOV is best effort. AVI, WMV, MKV do not play in browsers – the metabox warns and tells you to convert to MP4 (HandBrake is free) or use an embed instead. Opaque URLs without an extension (signed storage links) get a format hint dropdown.
• Posters: set one per video, or let the plugin auto-generate a poster from the first frame – browser-native, no server processing.
• Order: drag rows to set gallery order; “Show video first” puts video ahead of images globally.

Playback behavior (global)

• Click to play – the disciplined default: with a poster showing, zero video bytes are loaded before the shopper presses play.
• Autoplay living photo – the video plays silently in the gallery like an animated photo. Muted is forced, because browsers require muted autoplay.
• Custom flags – set the player flags yourself.

Placement under page builders

On a standard theme, the plugin replaces the WooCommerce gallery on single product pages and disables Woo’s own zoom, lightbox, and slider assets for that page so the two never conflict; variation selection keeps the gallery in sync on variable products. Page builders (Oxygen, Elementor, Divi, Bricks) render their own product page and bypass that hook, so under a builder you place the gallery explicitly: drop the [swpl_product_media] shortcode (optional product_id attribute) or the “SWPL Product Media Gallery” block where the gallery belongs in your builder template. Oxygen and Elementor are tested; Divi and Bricks ride the same standard shortcode pipeline. If you would rather your theme or builder keep its own gallery entirely, the General tab’s “Let the theme/builder handle the gallery” switch restores stock behavior.

For headless storefronts (developer notes)

Everything a headless frontend needs is served from the swpl-product-media/v1 REST namespace:

• GET /settings – the license flag plus the magnifier and video configuration blocks, with conditional settings resolved server-side.
• GET /product/<id> – the same configuration plus the product’s video descriptors in gallery order, filtered by the merchant’s source allowances.

The magnifier, lightbox, and player runtime modules are framework-agnostic ES modules – mount a container with a config, no jQuery – driven by exactly the config shapes REST serves. The “Headless mode” admin toggle only reveals the headless settings fields; the REST surface is live regardless.

Practical tips

• Test zoom with your real product photography: a 4x magnification of a 1200px source has little detail to give – pair high magnification with large source images.
• For jewelry and similar detail-driven catalogs, the lightbox deep zoom is where shoppers decide; keep the zoom cue on so they find it.
• If shoppers report the gallery looking doubled or overlaid, another zoom/gallery plugin is active alongside this one – run one, not both.