店铺图片尺寸指南（OS 3.0 主题） – SHOPLINE 常见问题

吸引眼球的视觉内容对网店的成功至关重要。高质量的图片配合合理的展示方式，能有效提升店铺设计感与买家印象。

本指南涵盖 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

注意：

扩展推荐尺寸：
- 桌面端：1,680 × 700 px
- 移动端：750 × 800 px
背景图片是本组件的核心视觉素材，请专门制作，勿复用商品卡图片或分类图片。建议选取 1–3 个关联性强的商品，确保每件商品在图中清晰可见。

购物视频

【购物视频】组件将短视频与相关商品卡配对，让顾客在同一模块中边看边买。

组件	图片字段	桌面端尺寸	移动端尺寸
购物视频	视频组封面图 / 海报图	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,920 × 650 px；
移动端：335 × 335 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 已按推荐尺寸上传图片，但图片仍无法完整显示，怎么办？

请检查以下两项设置：

图片展示区域：部分组件设有图片展示区域设置，可能影响可见范围。请确认已将此项设置为【自动】。
视差滚动：部分主题的视差滚动效果会对背景图片进行放大，导致裁切。如不需要此效果，请在主题设置中将其关闭。