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

image-zoom-360

Implement product image zoom, 360-degree spin viewers, and inline video on ecommerce product pages.

3|1|Updated Mar 21, 2026
Search Tags:#React#Shopify#woocommerce#media optimization#360 view#image zoom#product gallery
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-team --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-team/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/image-zoom-360
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill image-zoom-360-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Shoppers often return products because they could not inspect details closely enough online, and poorly implemented media galleries hurt page performance and LCP scores. This Skill guides the implementation of high-resolution hover zoom, touch-native pinch-to-zoom, 360-degree spin views, and inline product video across major ecommerce platforms. ## Core Features & Use Cases - Platform-Specific Setup: Step-by-step configuration for Shopify (Dawn themes, Magic Zoom Plus), WooCommerce (YITH Zoom Magnifier, gallery sliders), BigCommerce (Cornerstone zoom, Sirv), and custom/headless storefronts. - Custom React Components: Ready-to-adapt code for a CSS transform-based ZoomImage component and a drag-to-rotate SpinViewer with frame preloading and keyboard support. - Media Performance Optimization: Guidelines for WebP/AVIF formats, retina sizing, LCP prioritization with fetchpriority, and lazy-loading of spin frames and video. - Use Case: A fashion retailer with high return rates adds hover zoom and a 36-frame spin viewer to product pages so shoppers can inspect fabric texture and construction before buying. ## Quick Start Ask the AI to implement a product image zoom and 360-degree spin viewer for your Shopify, WooCommerce, BigCommerce, or custom storefront following this skill.

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 image zoom to a Shopify product page?▼

Shopify OS2.0 themes like Dawn include built-in image zoom. In Online Store → Themes → Customize, open the product template, find the Product media section, and enable Image zoom. For 360 spin views, install an app like Magic Zoom Plus.

How to build a 360-degree product spin viewer in React?▼

Preload the frame sequence (24-36 images), then map drag distance to frame index at roughly 8 pixels per frame, throttled with requestAnimationFrame to prevent mobile jitter. Add left/right arrow key support and role="img" with an aria-label for accessibility.

What is the best WooCommerce plugin for product image zoom?▼

YITH WooCommerce Zoom Magnifier adds inner, outer, or lens-style hover zoom with lightbox support. WooCommerce also includes basic Zoom.js magnification by default, configurable under WooCommerce → Settings → Products → Display.

Why does my product video not autoplay on iOS Safari?▼

iOS Safari requires both the playsInline and muted attributes on the video element for autoplay without a user gesture. Audio autoplay is blocked by most browsers, so muted autoplay with a poster image is the recommended approach.

How many frames should a 360 product spin view have?▼

24 to 36 frames is the recommended range for smooth rotation. At roughly 30 KB per optimized JPEG frame, a 36-frame sequence stays under 1 MB total, keeping load times acceptable on mobile connections.

Why does CSS transform zoom cause layout shift on my page?▼

Layout shift happens when the scaled image reflows sibling elements. Apply overflow: hidden on the container and will-change: transform on the image so the zoom scales visually without affecting surrounding price or add-to-cart elements.

Related Skills

Explore More Software Engineering Skills→
tomtoto757tomtoto757
3

image-zoom-360

Implement product image zoom, 360-degree spin viewers, and inline video on ecommerce product pages.

Community
Intermediate
sharkitect-solutionssharkitect-solutions

page-cro

Diagnose marketing page conversion issues across messaging, CTAs, and A/B testing rigor.

Community
Advanced
decocmsdecocms
13

images

Optimize storefront images with responsive srcset and AVIF/WebP format negotiation.

Official
Intermediate
CellCogCellCog
1

3d-cog

Generate textured GLB models with PBR materials from text, images, or sketches.

Official
Advanced