店铺图片尺寸指南（OS 3.0 主题）
吸引眼球的视觉内容对网店的成功至关重要。高质量的图片配合合理的展示方式，能有效提升店铺设计感与买家印象。
本指南涵盖 OS 3.0 主题所有组件的图片推荐尺寸，以及优化图片质量与性能的实用技巧。
商品类组件图片尺寸
商品类组件包含以商品和分类为核心的模块。请按以下建议尺寸上传图片，确保商品与分类图片在各设备上清晰显示。
特色商品分类
【特色商品分类】组件在店铺首页展示分类入口卡片。封面图用于呈现整个分类组的视觉主题，推荐图片为各分类卡的可选图片，用于突出单个分类。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 特色商品分类 | 封面图 | 600 × 600 px | 与桌面端相同 |
| 特色商品分类 | 分类卡推荐图片 | 105 × 105 px | 与桌面端相同 |
| 注意：封面图代表整个分类组的主题。推荐图片为各分类卡的可选项，如未上传，将使用默认分类图片。 |
精选商品
【精选商品】组件以分类为单位，将商品组织成标签页展示。本组件无需上传组件级专属图片，所有图片均自动从现有商品数据中获取。
| 注意：本组件无需额外上传图片。如需更新商品卡图片，请前往管理后台的【商品】，在对应商品中更新图片。 |
特色推荐商品
【特色推荐商品】组件以突出视觉与精选商品列表的形式展示单个分类。本组件支持桌面端与移动端分别上传图片，推荐尺寸因所选布局而异。
桌面端与移动端图片推荐尺寸（按布局）：
| 布局 | 桌面端推荐尺寸 | 移动端推荐尺寸 |
| 全屏布局 | 2,880 × 1,400 px | 720 × 1,500 px |
| 50% 布局 | 1,440 × 1,400 px | 720 × 760 px |
| 70% 布局 | 2,000 × 1,400 px | 720 × 1,000 px |
| 注意：未选择特定布局时，默认推荐尺寸为桌面端 468 × 760 px、移动端 355 × 100 px。桌面端图片约占页面宽度的 30%，建议使用竖向构图。 |
媒体推广商品
【媒体推广商品】组件将媒体内容（图片或视频）与一组相关商品配对，让您在展示商品的同时突出单一卖点。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 媒体推广商品 | 视频封面图 | 692 × 692 px | 与桌面端相同 |
| 媒体推广商品 | 桌面端商品图片 | 650 × 650 px | 与桌面端相同 |
| 注意：每个媒体组支持图片或视频作为媒体内容单元，每组建议聚焦于单一商品或卖点。 |
购物图片
【购物图片】组件以全宽背景图片为底，叠加可点击的商品热点，让顾客直接在图片上发现并购买商品。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 购物图片 | 桌面端背景图片 | 1,920 × 800 px | 375 × 580 px |
注意：
|
购物视频
【购物视频】组件将短视频与相关商品卡配对，让顾客在同一模块中边看边买。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 购物视频 | 视频组封面图 / 海报图 | 790 × 1,300 px | 352 × 586 px |
| 注意：视频是本组件的主要内容。每条视频下方的商品卡会自动从绑定的分类中获取，无需单独上传商品卡图片。 |
商品分类
【商品分类】组件以网格形式展示分类入口卡片，为顾客提供店铺商品分类的视觉概览。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 商品分类 | 分类卡图片（可选） | 1,080 × 1,080 px 或 1,080 × 1,350 px | 与桌面端相同 |
| 注意：分类卡图片为可选项。每张卡片图片应代表单一分类，请勿将多个不相关的分类混放在同一张图片中。 |
宣传类组件图片尺寸
宣传类组件用于品牌故事呈现、营销活动及视觉陈列。请按推荐尺寸上传图片，以避免在不同屏幕尺寸上出现裁切问题。
轮播图
【轮播图】组件展示一系列全宽图片或横幅，通常用于首屏视觉、促销活动或季节性营销。本组件支持桌面端与移动端分别上传图片。
| 设备 | 推荐尺寸 | 宽高比 |
| 桌面端 | 1,920 × 650 px | 3:1 |
| 移动端 | 375 × 500 px | 3:4 |
| 注意：如需避免图片被裁切，请将图片高度设置为【适应第一张图片】并关闭视差滚动效果。 |
特色轮播图
【特色轮播图】组件展示全屏幻灯片，图片与文字自适应浏览器尺寸，打造沉浸式叙事体验。本组件支持桌面端与移动端分别上传图片，推荐尺寸因所选布局而异。
桌面端与移动端图片推荐尺寸（按布局）：
| 布局 | 桌面端推荐尺寸 | 移动端推荐尺寸 |
| 全屏布局 | 2,880 × 1,400 px | 720 × 1,500 px |
| 50% 布局 | 1,440 × 1,400 px | 720 × 760 px |
| 70% 布局 | 2,000 × 1,400 px | 720 × 1,000 px |
注意：未选择特定布局时，默认推荐尺寸为：
|
图片横幅
【图片横幅】组件并排展示一至两张图片，通常用于促销横幅或营销活动视觉素材。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 图片横幅 | 图片 1 | 960 × 650 px | 与桌面端相同 |
| 图片横幅 | 图片 2 | 960 × 650 px | 与桌面端相同 |
图文模块
【图文模块】组件将图片与文字区块配对，适合用于突出商品特点、品牌故事或核心卖点。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 图文模块 | 710 × 710 px | 与桌面端相同 |
图文列表
【图文列表】组件以网格或列表形式展示多组图文卡片，适合同时呈现多项功能、优势或分类。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 图文列表 | 592 × 392 px | 与桌面端相同 |
| 注意：系统将保留图片原始宽高比，以上推荐尺寸基于典型显示尺寸提供参考。 |
图片悬浮切换
【图片悬浮切换】组件展示鼠标悬停时切换的图片，为顾客创造互动式浏览体验。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 图片悬浮切换 | 800 × 800 px | 与桌面端相同 |
| 注意：推荐宽度为 820 px，高度可自由调整。 |
富文本
【富文本】组件展示带可选背景图片的格式化文字区块，适合用于品牌传播、公告或编辑内容。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 富文本（背景图片） | 1,920 × 380 px | 与桌面端相同 |
视频
【视频】组件嵌入视频，并支持在视频播放前展示海报图。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 视频（海报 / 封面图） | 1,920 × 800 px | 与桌面端相同 |
成分展示
【成分展示】组件以结构化视觉形式呈现商品成分、材质或组成部分，适合进行深度商品故事叙述。
| 组件 | 图片字段 | 桌面端尺寸 | 移动端尺寸 |
| 成分展示 | 图片（图文卡片） | 284 × 284 px | 与桌面端相同 |
| 成分展示 | 弹窗按钮图片 | 580 × 580 px | 与桌面端相同 |
| 成分展示 | 展示区图片（大图） | 1,420 × 440 px | 与桌面端相同 |
| 注意：大图展示区自适应性强，默认填满可用宽度。 |
对照
【对照】组件并排展示两张图片，中间设有可拖动的分隔线，让顾客直观对比商品使用前后的效果。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 对照（对比图片） | 1,420 × 580 px | 与桌面端相同 |
拼贴
【拼贴】组件以拼贴风格组合商品图片、分类图片及可选视频，适合视觉叙事与营销活动展示。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 拼贴（视频封面图） | 854 × 1,240 px | 与桌面端相同 |
| 注意：【拼贴】组件的视觉构成主要依赖商品图片和分类图片。 |
拼接图文模块
【拼接图文模块】组件以拼接布局将图片与文字区块组合，适合在展示商品的同时呈现其核心细节或故事。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 拼接图文模块 | 792 × 700 px | 与桌面端相同 |
其他组件图片尺寸
这些组件为您的店铺提供信任背书与补充内容。请按推荐尺寸上传图片，确保呈现简洁、专业的视觉效果。
商标列表
【商标列表】组件以横排形式展示品牌或合作伙伴标志，通常用于建立可信度或展示媒体报道。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 商标列表（品牌 logo） | 328 × 328 px | 与桌面端相同 |
地图
【地图】组件展示实体门店位置地图，并支持可选背景图片，适合设有线下门店的商家使用。
| 设备 | 推荐尺寸 |
| 桌面端 | 900 × 528 px |
| 移动端 | 380 × 240 px |
倒计时器
【倒计时器】组件展示倒计时钟，并支持可选背景图片，适合限时促销或商品上市活动。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 倒计时器（图片） | 520 × 520 px | 355 × 355 px |
博客
【博客】组件无需上传组件级专属图片。博客卡片封面图会自动从【博客】中获取。
| 注意：如需更新博客卡片封面图，请前往管理后台的【博客】，在各博客文章中更新封面图。 |
多级筛选
【多级筛选】组件展示带可选背景图片的分类导航栏，让顾客通过多级筛选浏览商品。
| 组件 | 桌面端尺寸 | 移动端尺寸 |
| 多级筛选（背景图片） | 1,920 × 450 px | 与桌面端相同 |
自定义页面
【自定义页面】组件支持创建完全自定义的页面，桌面端与移动端均可上传可选封面图。
| 设备 | 图片字段 | 推荐尺寸 |
| 桌面端 | 桌面端封面图 | 1,420 × 580 px |
| 移动端 | 移动端封面图 | 355 × 360 px |
| 注意：自定义页面封面图为可选项，如不需要可忽略。 |
分类页面图片尺寸
【商品列表页面】用于展示特定分类下的商品。本页面包含以下设有专属图片字段的组件。
| 元素 | 推荐尺寸 |
| 移动端 banner 图 | 1,920 × 380 px |
图片上传技巧
- 保障图片质量：尽量上传最高分辨率的原始图片，以保留细节并支持无损缩放。
- 提升加载速度：优先选择 .jpg 格式而非 .png，以加快加载速度。主题会自动调整图片尺寸以提升页面加载效率。
- 移动端优先：由于桌面端商品图片布局可灵活调整，建议重点优化移动端的商品图片显示效果。
- 保持比例一致：同一组件内的所有图片请使用相同的宽高比，确保整体视觉统一、专业。
- 关键元素居中：上传固定高度组件（如【轮播图】、【图片横幅】）的图片时，请将核心设计元素居中放置，避免在不同设备上出现裁切。
关于 OS 3.0 主题编辑器图片尺寸的常见问题
Q 1 为什么我的图片会被裁切？
主题会根据不同屏幕宽度和设备自动调整图片尺寸，以下情况可能导致裁切：
- 固定高度组件：轮播图、图片横幅等组件有默认固定高度，可能与您的图片实际尺寸不完全匹配。
- 固定宽高比组件：使用固定宽高比的组件会自动裁切图片，默认从图片中心裁切，除非您在图片展示区域设置中手动调整焦点。
- 响应式图片处理：许多组件采用响应式处理机制，会对宽幅图片进行缩放和裁切，确保在桌面端和移动端显示一致。系统会将图片放大以完整覆盖展示区域，从而避免拉伸或变形。
Q 2 为什么选择了「自适应图片」后，图片仍然被裁切？
如果已开启视差滚动效果，图片仍可能被裁切。为维持视差效果，当图片尺寸超过展示区域时，系统会自动进行缩放和裁切。如需完整显示图片，请在组件设置中关闭视差滚动。
Q 3 已按推荐尺寸上传图片，但图片仍无法完整显示，怎么办？
请检查以下两项设置：
- 图片展示区域：部分组件设有图片展示区域设置，可能影响可见范围。请确认已将此项设置为【自动】。
- 视差滚动：部分主题的视差滚动效果会对背景图片进行放大，导致裁切。如不需要此效果，请在主题设置中将其关闭。