用途:在商品详情页实现丰富媒体体验,包括高清悬停缩放、移动端捏合缩放、由序列图组成的360度旋转视图以及内嵌视频播放。资料称更丰富的媒体与更低退货率和更高转化相关,适合时尚、珠宝、电子等细节敏感品类。
主要能力:按平台给出不同方案。Shopify 可用 OS2.0 主题(Dawn、Sense)内置媒体支持,配合 Magic Zoom Plus(一次性69美元)或 Swiper Gallery 实现360度;WooCommerce 可装 Product Gallery Slider 或 YITH WooCommerce Zoom Magnifier(免费/付费),360度用免费的 WooCommerce 360° Image 插件;BigCommerce 用 Cornerstone 主题内置缩放,配合 Magic 360 或 Sirv(20美元+/月);自定义/无头方案用 CSS transform 缩放、Pointer Events API 捏合缩放和基于帧的旋转查看器。
使用方式:各平台在后台媒体区上传图片、视频URL或 .glb 模型,并在主题自定义中启用图像缩放、设置媒体尺寸、开启视频循环;变体图片可在变体设置中指定。360度需上传编号序列图(如 product-001.jpg 至 product-036.jpg)。自定义方案提供 ZoomImage 与 SpinViewer 组件示例,含拖拽切换帧逻辑。
限制与注意:主图通常为 LCP 元素,需高优先级加载;建议 WebP/AVIF、2倍渲染尺寸、360帧24-36张、每帧20-40KB;360视图需加载状态与键盘方向键替代;iOS 视频自动播放需 playsInline 和 muted;避免缩放导致布局偏移和移动端旋转卡顿。具体价格与平台支持以官方为准。