图片尺寸建议 – SHOPLINE 常见问题

图片是店铺设计的重要素材，良好的图片质量以及合理的展示可以提高店铺整体设计感，间接促进店铺转化。为此，我们列举了各组件推荐图片尺寸和一些您在设计过程中可能遇到的问题，您可以按照以下建议选择更合适的图片。您可以点击图片优化博客文章了解功能的详细介绍。

功能目录

各组件图片尺寸建议
其他注意事项
FAQ

各组件图片尺寸建议

商品图

由于商品在电脑端的布局是可调整的，建议您优先考虑手机端的图片显示效果。我们提供方形（1:1）、纵向（2:3）、横向（4:3）和原始比例 4 种商品比例选择，可根据您的产品形状，挑选适合的比例。

备注：如选择了原始比例，则会以原图的比例显示，请尽可能保持所有商品图的比例一致，否则在列表展示中，商品会出现高低不齐的效果，影响浏览体验。

推荐的比例	2:3
最小尺寸（移动端75%宽度）	560 px 宽	840 px 高
推荐尺寸（详情页大图）	1700 px 宽	2550 px 高

分类封面

我们可以在【店铺后台】>【商品】>【商品分类】中上传分类封面。

推荐的比例	1:1
推荐尺寸	≥ 1600 px

分类 bannar

分类 bannar 图片可以在【店铺后台】>【商品】>【商品分类】中上传，当屏宽变化时会固定高度缩放宽度，存在一定裁切。

推荐尺寸

1920 px 宽

420 px 高

轮播图

我们支持电脑端和移动端独立配置图片，可以根据显示效果分别上传素材。

备注：如选择了固定高度，则会对您的图片进行裁切；如选择了视差效果，即便选择了适应图片，也会发生裁剪。如您不希望图片被裁剪，建议您选择适应第一张图片尺寸，以及关闭滚动视差效果。

电脑端推荐的比例	3:1
推荐尺寸	1920 px 宽	650 px 高

移动端推荐的比例	1:2
推荐尺寸	375 px 宽	500 px 高

特色轮播图

在 Expect、Soo、Metal、Flexible、Control 等模板中，有特色轮播图插件，图片和文字支持适配浏览器大小。

备注：上传电脑端图片时，不同设备屏幕会存在裁剪，注意不要把主要元素设计太靠边；上传移动端图片时，此组件文字会覆盖在图片之上，请在图片下方预留空间以免主要元素被遮挡。

电脑端推荐尺寸	高度设置为“全屏”时	1220 px 宽	1080 px 高
	高度设置为具体值时	1152 px 宽	高度按适配值
移动端推荐尺寸	高度设置为“全屏”时	1125 px 宽	1125 px 高
	高度设置为具体值时	750 px 宽	高度按适配值 2 倍

单图

单图默认为固定高度，图片会发生裁剪，可以通过选择图片展示区域来控制不想被裁剪的焦点内容，或者更改图片高度为“适应图片”来避免裁剪。

备注：素材图片高度尽量高于设置的裁剪高度，否则图片将会放大模糊。

电脑端推荐的比例	16:9
推荐尺寸	1920 px 宽	1080 px 高

移动端推荐尺寸

750 px 宽

1020 px 高

图文列表

推荐的比例	4:3（会应用原图比例，此处只做建议）
推荐尺寸	650 px 宽	488 px 高

博客

推荐的比例	4:3（可配置）
推荐尺寸	650 px 宽	488 px 高

页脚推广

推荐的比例	16:9（可配置）
推荐尺寸	650 px 宽	488 px 高

常用组件推荐尺寸

组件名称	推荐尺寸	适用主题
图标申明	144 px * 144 px	Edges Cycle Carfit feeling extent shine wink blouse barn Brooklyn soo flexible control solid along expect bobo bloom impress
评论模板	240 px * 240 px	Edges/Cycle/Carfit/solid
图文网格	不同布局下尺寸不一，建议宽度 1420 px 以上	Edges/Cycle/Carfit/barn
特色推荐	不同布局下尺寸不一，建议宽度 1420 px 以上	Edges/Cycle/Carfit/Barn
购物图片-设置	不同布局下尺寸不一，建议宽度 1420 px 以上	Edges/Cycle/Carfit/charm/shine/solid
商标列表	320 px * 320 px	Expect/Control/Metal/Soo/Flexible/barn /cycle/carfit/soo/edges/bobo
活动推广	分类：建议宽度 1600 px 以上 Banner 图片：400 px 宽度以上	Expect/Control/Metal/Soo/Flexible/ edges/bloom
图文模块	图片将自适应高度，建议尺寸 1000 px * 1000 px	所有模板

特色组件推荐尺寸

组件名称	推荐尺寸	适用主题
主题设置里网站图标	28 px * 28 px	所有主题
带封面的精选商品	472 px * 330 px	barn
媒体拼接	854 px * 1232 px	seed，charm，feeling，extent，shine， wink，arise，edges，
视频	1920 px * 800 px	所有主题
手风琴标签	470 px * 470 px	seed，charm
图片横幅	960 px * 650 px 1920 px * 650 px	seed，charm，feeling，extent，shine， wink，arise，edges，
优惠横幅	180 px * 180 px	barn
特色推荐商品	470 px * 760 px	charm
拼接图文模块	600 px * 700 px	charm
图片悬浮切换	800 px * 800 px	charm
图文导航	160 px * 160 px	flash
图文轮播	339 px * 246 px	blouse
图片拼接	700 px * 700 px	flash
视频图文模块	710 px * 400 px	feeling，extent，shine，wink，blouse，edges
移动端页脚菜单	120 px * 120 px	flash
时间线	500 px * 500 px	feeling，extent，shine，wink，blouse， edges，solid
地图	710 px * 528 px	feeling，extent，shine，wink， arise，blouse，barn，brooklyn ，flexible，control，edges， solid，along，expect，bobo，bloom，impress
多级筛选	1920 px * 650 px	cycle，carfit，edges

结账页背景图尺寸

使用图片作为背景图	顶部 banner 图	左侧背景图	右侧背景图
使用图片作为背景图	1920 px * 200 px	1048 px * 1048 px	872 px * 1048 px

示例：

使用背景纹理作为背景图

系统会自动为您上传的图片进行横向与纵向的复制堆叠：

所以图片的大小没有限制，您可在编辑器上测试效果并调整。

示例：

其他注意事项

建议提供尺寸尽可能大的原图，视觉展示效果最好。

建议使用 .jpg 而不是 .png 的文件格式，图片加载速度更快。主题会根据不同屏幕加载合适的图片大小，确保您的网站加载速率。

FAQ

Q1：为什么图片会发生裁剪？

模块设置为固定高度
单图模块：在适配不同屏幕宽度以及手机设备的时候，为了保证内容的可读性，默认固定了该模块高度，则无法保证图片等比展示。
轮播图模块：如设置为固定高度，则在不同屏宽下图片都会保持同样高度，此时比例发生变化，就会对图片进行裁剪。
设置了固定比例
如模块设定了固定的比例，则会自动处理裁切，如未设置图片显示区域，则默认居中裁剪。
响应式图像处理
在主题的许多模块（轮播图、单图等）中使用了响应式图像。响应式图像是放大和裁剪宽幅图像的行业标准技术，以确保图像对电脑端和手机端具有相同的影响。会将拍摄您的照片放大，直到它完全覆盖显示区域，以便在不拉伸或扭曲图像的情况下进行缩放处理。

响应式处理前的商品显示

响应式处理后的商品显示

Q2：为什么设置了适应图片还是会被裁剪？

可能是打开了视差滚动效果。为了保证视差生效，会自动放大图片使其图片大小超过显示区域，自然会发生裁剪。

Q3：使用了建议尺寸，图片还是显示不全？

先检查高度设置是否为“适应图片”。如果设置无误，再检查是否开启了“视差效果”，关闭即可保持不裁剪。

如何联系我们

SHOPLINE 拥有专业的本地支持团队，为有需求和疑惑的商家提供帮助。您可以通过联系 SHOPLINE 店铺后台及官方网页的实时客服来寻求 SHOPLINE 的帮助。
*如有 SHOPLINE 功能使用感受或需求建议，快点击【功能反馈】告诉我们吧！