finsilabs/image-zoom-360

Image Zoom & 360-Degree Views

Overview

Implement a rich product media experience that includes high-resolution zoom on hover, touch-native pinch-to-zoom on mobile, 360-degree spin views from a sequence of images, and inline video playback. Richer media is associated with lower return rates and higher conversion for fashion, jewelry, electronics, and other detail-sensitive categories.

When to Use This Skill

• When product return rates are high and additional visual detail could reduce them
• When implementing a product detail page for fashion, jewelry, electronics, or other detail-sensitive categories
• When upgrading from a static single image to a full media gallery
• When integrating with a product photography workflow that includes 360-degree spin assets
• When product videos exist and need to be surfaced inline on the PDP

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach

| Platform | Recommended Approach | Why | |----------|---------------------|-----| | Shopify | Use built-in media support in OS2.0 themes (Dawn, Sense) + Magic Zoom Plus app or Swiper Gallery for 360 | Dawn natively supports product images, video, and 3D models in the media gallery; Magic Zoom Plus ($69 one-time) adds hover zoom and 360 spin without theme edits | | WooCommerce | Install WooCommerce Product Gallery Slider or YITH WooCommerce Zoom Magnifier (free/premium) | WooCommerce includes a basic gallery; YITH Zoom Magnifier adds hover zoom and lightbox; Product Gallery Slider adds swipe, thumbnails, and video support | | BigCommerce | Use the Cornerstone theme's built-in zoom (hover zoom is enabled by default) + install Magic 360 or Sirv app for spin views | Cornerstone has native zoom; Sirv ($20+/mo) provides hosted 360 spin and zoom CDN with a Stencil widget | | Custom / Headless | Build a custom gallery component with CSS transform zoom, Pointer Events API for pinch-to-zoom, and frame-based spin viewer | Full control over performance and UX; see implementation below |

Step 2: Set up the product gallery

---

Shopify

Built-in media gallery (no app required):

1. In your product admin (Products → [product] → Media), upload images, add YouTube/Vimeo video URLs, and upload .glb files for 3D models
2. Shopify OS2.0 themes (Dawn, Sense, Craft) display all media types in the gallery automatically — images, video, and 3D
3. In Online Store → Themes → Customize, navigate to your product page template and find the Product media section:
   • Enable Image zoom (magnifier on hover)
   • Set Media size to Large or Extra Large for better zoom quality
   • Enable Video looping for product videos
4. For variant-specific images: assign images to variants in Products → [product] → Variants → [variant] → Image — the gallery automatically switches to the variant image when a shopper selects that variant

For 360-degree spin views — Magic Zoom Plus ($69 one-time):

1. Install from the Shopify App Store
2. Upload your spin sequence images as numbered files (e.g., product-001.jpg through product-036.jpg)
3. The app creates a spin viewer widget that embeds in your product page without theme code changes

---

WooCommerce

Built-in zoom (no plugin required):

WooCommerce includes basic image zoom (powered by Zoom.js) by default on product pages. To configure it:

1. Go to WooCommerce → Settings → Products → Display
2. Under Product Images, set Zoom behavior: Enabled, Disabled, or Inner
3. Upload high-resolution images (at least 1000×1000px) — the zoom uses the full uploaded image

YITH WooCommerce Zoom Magnifier (free + premium):

1. Install from WordPress.org
2. Go to YITH → Zoom Magnifier → Settings
3. Configure zoom type: Inner (magnifies within the image container), Outer (shows magnified panel beside the image), or Lens (circular magnifier follows cursor)
4. Enable lightbox for full-screen zoom on click

Product Gallery Slider (free — WooCommerce.com):

1. Install and activate
2. Adds swipe support, thumbnail strip, and fullscreen lightbox to the built-in WooCommerce gallery
3. Supports video thumbnails (YouTube/Vimeo) in the gallery

For 360 views: Use WooCommerce 360° Image plugin (free, wordpress.org) — upload numbered spin frames as product images prefixed with 360_ and the plugin creates a drag-to-spin viewer.

---

BigCommerce

Built-in zoom (Cornerstone theme):

1. Go to Storefront → My Themes → Customize
2. Under Product Page → Image, enable Image zoom (hover zoom is on by default)
3. Set Image size to Large for better zoom quality — BigCommerce serves images at multiple sizes automatically

Sirv (hosted 360 spin + zoom CDN):

1. Install Sirv from the BigCommerce App Marketplace
2. Upload your spin sequence images to Sirv's CDN — it auto-detects numbered sequences
3. Paste the Sirv embed code into your product description or use the Sirv BigCommerce widget
4. Sirv also serves all your product images via its CDN with automatic WebP conversion

Product videos:

1. In your BigCommerce product admin, click Add Video in the media section and paste a YouTube or Vimeo URL
2. Videos appear as thumbnail items in the product gallery automatically

---

Custom / Headless

CSS hover zoom (no JavaScript image loading):

// ZoomImage.jsx
import { useState, useRef } from 'react';

export function ZoomImage({ src, alt }) {
  const [zoom, setZoom] = useState(null);
  const containerRef = useRef(null);

  function handleMouseMove(e) {
    const rect = containerRef.current.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    setZoom({ x, y });
  }

  return (
    <div
      ref={containerRef}
      className="zoom-container"
      onMouseMove={handleMouseMove}
      onMouseLeave={() => setZoom(null)}
    >
      <img
        src={src}
        alt={alt}
        className="zoom-image"
        style={zoom ? {
          transformOrigin: `${zoom.x}% ${zoom.y}%`,
          transform: 'scale(2.5)',
        } : {}}
        draggable={false}
      />
    </div>
  );
}

.zoom-container { overflow: hidden; cursor: crosshair; aspect-ratio: 1/1; }
.zoom-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.05s linear; will-change: transform; }

360-degree spin viewer:

// SpinViewer.jsx — preloads all frames, switches on drag
export function SpinViewer({ frames, productName = 'Product' }) {
  const [frameIndex, setFrameIndex] = useState(0);
  const [loaded, setLoaded] = useState(false);
  const dragStart = useRef(null);

  useEffect(() => {
    let count = 0;
    frames.forEach(src => {
      const img = new Image();
      img.src = src;
      img.onload = () => { if (++count === frames.length) setLoaded(true); };
    });
  }, [frames]);

  function handleDragStart(e) { dragStart.current = e.clientX ?? e.touches?.[0]?.clientX; }
  function handleDragMove(e) {
    if (dragStart.current === null) return;
    const clientX = e.clientX ?? e.touches?.[0]?.clientX;
    const delta = Math.round((clientX - dragStart.current) / 8);
    if (delta !== 0) {
      setFrameIndex(i => ((i + delta) % frames.length + frames.length) % frames.length);
      dragStart.current = clientX;
    }
  }
  function handleDragEnd() { dragStart.current = null; }

  if (!loaded) return <div aria-label="Loading 360 view">Loading...</div>;
  return (
    <div
      onMouseDown={handleDragStart} onMouseMove={handleDragMove}
      onMouseUp={handleDragEnd} onMouseLeave={handleDragEnd}
      onTouchStart={handleDragStart} onTouchMove={handleDragMove} onTouchEnd={handleDragEnd}
      aria-label="360 degree product view — drag to rotate"
      role="img" style={{ cursor: 'ew-resize' }}
    >
      <img src={frames[frameIndex]} alt={`${productName}, frame ${frameIndex + 1} of ${frames.length}`} draggable={false} />
      <span aria-hidden="true" style={{ fontSize: '0.75rem', color: '#666' }}>Drag to rotate</span>
    </div>
  );
}

Step 3: Optimize media for performance

Regardless of platform, follow these media guidelines:

1. Hero image: Upload at minimum 2000px on the longest side for zoom quality; platforms resize down automatically for thumbnails
2. Format: Upload WebP images where your platform supports it — Shopify, BigCommerce, and Sirv convert automatically; for WooCommerce use the Imagify or ShortPixel plugin
3. 360 spin frames: 24-36 frames is the sweet spot; at 30 KB per frame (optimized JPEG) that is under 1 MB total for the full sequence
4. Video: Upload MP4 directly to Shopify/BigCommerce, or embed YouTube/Vimeo to offload hosting costs; always include a poster image
5. LCP (Largest Contentful Paint): The main product image is almost always the LCP element — ensure it loads with high priority

Best Practices

• Serve images at 2x the rendered size for retina screens but no larger — a 400px container needs an 800px image, not 2000px
• Use WebP or AVIF format — 30-50% smaller than JPEG at equivalent quality
• Pre-load the hero image — add fetchpriority="high" and loading="eager" to the first product image
• Lazy-load non-hero media — thumbnails, 360 frames 2–N, and video should load after first interaction
• Show a loading state for 360 views — preloading 36 frames can take several seconds on mobile; show a progress indicator
• Provide keyboard alternatives for drag interactions — 360 spin should support left/right arrow keys in addition to mouse drag
• Avoid autoplay with sound — muted autoplay is acceptable; audio autoplay is blocked by most browsers

Common Pitfalls

| Problem | Solution | |---------|----------| | Zoom CSS transform causes layout shift | Use will-change: transform and overflow: hidden on the container so the scaled image does not reflow siblings | | 360 spin is jittery on mobile | Throttle frame updates to one per requestAnimationFrame; do not call setState on every touchmove event | | Video does not autoplay on iOS | Add playsInline and muted attributes; iOS requires both for autoplay without user gesture | | LCP score poor due to large hero image | Add fetchpriority="high" and loading="eager" to the main product image; verify with Lighthouse | | 360 assets too large (36 × 500 KB) | Target 20–40 KB per frame at 800px wide using JPEG quality 75 through your CDN |

Related Skills

• @product-page-design
• @responsive-storefront
• @accessibility-commerce
• @image-optimization-cdn