skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

image-zoom-360

Add zoom, 360-degree spin viewers, and inline video to product galleries.

14|3|Updated Mar 22, 2026
Search Tags:#performance#accessibility#video#images#zoom#360-degree#product-gallery
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill image-zoom-360-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: image-zoom-360
Source: https://github.com/tomtoto757/ecomm-ai-skills-hub/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/image-zoom-360
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-skills-hub --skill image-zoom-360-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Product pages with single static images often fail to convey fine product details, increasing returns and reducing conversion; this Skill provides a richer media experience so shoppers can inspect items closely before buying.

Core Features & Use Cases

  • High-resolution hover zoom for desktop and touch-native pinch-to-zoom for mobile to reveal fine detail.
  • 360-degree spin viewer built from frame sequences (24–36 frames) with drag and keyboard controls for full-angle inspection.
  • Inline video integration (MP4/WebM) surfaced in the product gallery and hero image prioritization to improve LCP.
  • Performance guidance: retina 2x sizing, WebP/AVIF recommendations, CDN-friendly URL parameters, lazy-loading non-hero media and preload strategy for 360 frames.
  • Use case: upgrade a fashion or electronics PDP to reduce returns and raise buyer confidence by combining zoom, spin, and video.

Quick Start

Add a product media gallery with hover zoom, touch pinch-to-zoom, a 360-degree spin viewer (24–36 frames), and inline HTML5 video while prioritizing the hero image for fast LCP.

Frequently Asked Questions about image-zoom-360

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a 360-degree spin viewer and high-res zoom to my product detail pages?▼

To add a 360-degree spin viewer and high-res zoom, implement a frame sequence of 24–36 images with drag and keyboard controls, alongside hover or pinch-to-zoom functionality. This enables detailed product inspection directly on your storefront's product detail pages.

Does this image zoom and 360 spin approach work with custom headless storefronts?▼

Yes, this image zoom and 360 spin approach works with custom headless storefronts, as well as Shopify, WooCommerce, and BigCommerce. It integrates into product detail pages using standard HTML5 video and prioritized image loading techniques.

What's the best way to optimize 360-degree product gallery images for LCP and accessibility?▼

The best way to optimize 360-degree product gallery images for LCP and accessibility is to use fetchpriority=high and loading=eager for the hero image. Additionally, serve 2x retina sizing in WebP/AVIF formats and ensure keyboard operability for the spin viewer.

How many frames do I need for a smooth 360-degree product spin viewer?▼

You need 24 to 36 frames for a smooth 360-degree product spin viewer. Throttling the frame animation with requestAnimationFrame ensures performance stability while allowing users to drag through the sequence for full-angle inspection.

Can I integrate inline product video into my existing image zoom gallery?▼

Yes, you can integrate inline product video into your existing image zoom gallery using MP4 or WebM formats. The video is surfaced directly within the product media gallery alongside the 360-degree spin viewer and high-resolution zoom images.

Why does my 360-degree spin viewer cause performance issues on mobile devices?▼

Your 360-degree spin viewer causes performance issues on mobile devices if it lacks requestAnimationFrame throttling or proper image optimization. Improve performance by lazy-loading non-hero media, preloading 360 frames, and using CDN-friendly URL parameters for WebP/AVIF assets.

Related Skills

Explore More Software Engineering Skills→
exiaoexiao
37

demo-video

Record browser interactions and encode frames into MP4, GIF, or WebM videos.

Community
Intermediate
finsilabsfinsilabs
44

image-zoom-360

Implement high-resolution zoom, 360-degree spin views, and inline video playback for product media.

Official
Intermediate
finsilabsfinsilabs
44

image-optimization-cdn

Resize and convert e-commerce product images to WebP/AVIF for CDN delivery.

Official
Intermediate
scumunnascumunna
1

dv360-deals-and-inventory

Select inventory types and set up deals in Display & Video 360.

Community
Advanced