图片是店铺设计的重要素材，良好的图片质量以及合理的展示可以提高店铺整体设计感，间接促进店铺转化。为此，我们列举了各组件推荐图片尺寸和一些您在设计过程中可能遇到的问题，您可以按照以下建议选择更合适的图片。您可以点击图片优化博客文章了解功能的详细介绍。
功能目录
各组件图片尺寸建议
商品图
由于商品在电脑端的布局是可调整的，建议您优先考虑手机端的图片显示效果。我们提供方形（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 功能使用感受或需求建议，快点击【功能反馈】告诉我们吧！
评论