图片是店铺设计的重要素材，良好的图片质量以及合理的展示可以提高店铺整体设计感，间接促进店铺转化。为此，我们列举了各组件推荐图片尺寸和一些您在设计过程中可能遇到的问题，您可以按照以下建议选择更合适的图片。
您可以点击图片优化博客文章了解功能的详细介绍。
各组件图片尺寸建议
1.商品图
由于商品在电脑端的布局是可调整的，建议您优先考虑手机端的图片显示效果。
我们提供方形（1:1）、纵向（2:3）、横向（4:3）和原始比例4种商品比例选择，可根据您的产品形状，挑选适合的比例。
注意：如选择了原始比例，则会以原图的比例显示，请尽可能保持所有商品图的比例一致，否则在列表展示中，商品会出现高低不齐的效果，影响浏览体验。
| 推荐的比例 | 2:3 | |
| 最小尺寸（移动端75%宽度） | 560px 宽 | 840px 高 |
| 推荐尺寸（详情页大图） | 1700px 宽 | 2550px 高 |
2.分类封面
我们可以在店铺后台>>商品>>商品分类中上传分类封面。
| 推荐的比例 | 1:1 |
| 推荐尺寸 | ≥1600px |
3.分类bannar
分类bannar图片可以在店铺后台>>商品>>商品分类中上传，当屏宽变化时会固定高度缩放宽度，存在一定裁切。
| 推荐尺寸 | 1920px宽 | 420px高 |
4.轮播图
我们支持电脑端和移动端独立配置图片，可以根据显示效果分别上传素材。
注意：如选择了固定高度，则会对您的图片进行裁切；如选择了视差效果，即便选择了适应图片，也会发生裁剪。。如您不希望图片被裁剪，建议您选择适应第一张图片尺寸，以及关闭滚动视差效果。
| 电脑端推荐的比例 | 3:1 | |
| 推荐尺寸 | 1920px 宽 | 650px 高 |
| 移动端推荐的比例 | 1:2 | |
| 推荐尺寸 | 375px 宽 | 500px 高 |
5.特色轮播图
在Expect、Soo、Metal、Flexible、Control等模板中，有特色轮播图插件，图片和文字支持适配浏览器大小。注意：上传电脑端图片时，不同设备屏幕会存在裁剪，注意不要把主要元素设计太靠边；上传移动端图片时，此组件文字会覆盖在图片之上，请在图片下方预留空间以免主要元素被遮挡。
| 电脑端推荐尺寸 | 高度设置为“全屏”时 | 1220px宽 | 1080px高 |
| 高度设置为具体值时 | 1152px宽 | 高度按适配值 | |
| 移动端推荐尺寸 | 高度设置为“全屏”时 | 1125px宽 | 1125px高 |
| 高度设置为具体值时 | 750px宽 | 高度按适配值2倍 |
6.单图
单图默认为固定高度，图片会发生裁剪，可以通过选择图片展示区域来控制不想被裁剪的焦点内容，或者更改图片高度为“适应图片”来避免裁剪。
注意：素材图片高度尽量高于设置的裁剪高度，否则图片将会放大模糊。
| 电脑端推荐的比例 | 16:9 | |
| 推荐尺寸 | 1920px 宽 | 1080px 高 |
| 移动端推荐尺寸 | 750px 宽 | 1020px 高 |
7.图文列表
| 推荐的比例 | 4:3（会应用原图比例，此处只做建议） | |
| 推荐尺寸 | 650px 宽 | 488px 高 |
8.博客
| 推荐的比例 | 4:3（可配置） | |
| 推荐尺寸 | 650px 宽 | 488px 高 |
9.页脚推广
| 推荐的比例 | 16:9（可配置） | |
| 推荐尺寸 | 650px 宽 | 488px 高 |
10.常用组件推荐尺寸
| 组件名称 | 推荐尺寸 | 适用主题 |
| 图标申明 | 144px*144px | Edges Cycle Carfit feeling extent shine wink blouse barn Brooklyn soo flexible control solid along expect bobo bloom impress |
| 评论模板 | 240px*240px | Edges/Cycle/Carfit/solid |
| 图文网格 | 不同布局下尺寸不一，建议宽度1420px以上 | Edges/Cycle/Carfit/barn |
| 特色推荐 | 不同布局下尺寸不一，建议宽度1420px以上 | Edges/Cycle/Carfit/Barn |
| 购物图片-设置 | 不同布局下尺寸不一，建议宽度1420px以上 | Edges/Cycle/Carfit/charm/shine/solid |
| 商标列表 | 320px*320px |
Expect/Control/Metal/Soo/Flexible/barn /cycle/carfit/soo/edges/bobo |
| 活动推广 |
分类：建议宽度1600px以上 Banner图片：400px宽度以上 |
Expect/Control/Metal/Soo/Flexible/ edges/bloom |
| 图文模块 |
图片将自适应高度，建议尺寸1000px*1000px |
所有模板 |
11.特色组件推荐尺寸
| 组件名称 | 推荐尺寸 | 适用主题 |
| 主题设置里网站图标 | 28*28px | 所有主题 |
| 带封面的精选商品 | 472*330 | barn |
| 媒体拼接 | 854*1232 |
seed，charm，feeling，extent，shine，
wink，arise，edges， |
| 视频 | 1920*800 | 所有主题 |
| 手风琴标签 | 470*470 | seed，charm |
| 图片横幅 | 960*650/1920*650 |
seed，charm，feeling，extent，shine，
wink，arise，edges， |
| 优惠横幅 | 180*180 | barn |
| 特色推荐商品 | 470*760 | charm |
| 拼接图文模块 | 600*700 | charm |
| 图片悬浮切换 | 800*800 | charm |
| 图文导航 | 160*160 | flash |
| 图文轮播 | 339*246 | blouse |
| 图片拼接 | 700*700 | flash |
| 视频图文模块 | 710*400 |
feeling，extent，shine，wink，blouse，edges
|
| 移动端页脚菜单 | 120*120 | flash |
| 时间线 | 500*500 |
feeling，extent，shine，wink，blouse，
edges，solid |
| 地图 | 710*528 |
feeling，extent，shine，wink，
arise，blouse，barn，brooklyn ，flexible，control，edges， solid，along，expect，bobo，bloom，impress |
| 多级筛选 | 1920*650 |
cycle，carfit，edges
|
12.结账页背景图尺寸
| 使用图片作为背景图 | 顶部banner图 | 左侧背景图 | 右侧背景图 |
| 1920px * 200px | 1048px * 1048px | 872px * 1048px |
示例：
| 使用背景纹理作为背景图 |
系统会自动为您上传的图片进行横向与纵向的复制堆叠： 所以图片的大小没有限制，您可在编辑器上测试效果并调整。 |
示例：
其他注意事项
建议提供尺寸尽可能大的原图，视觉展示效果最好。
建议使用jpg而不是png的文件格式，图片加载速度更快。 主题会根据不同屏幕加载合适的图片大小，确保您的网站加载速率。
FAQ
Q1:为什么图片会发生裁剪？
-
模块设置为固定高度
单图模块：在适配不同屏幕宽度以及手机设备的时候，为了保证内容的可读性，默认固定了该模块高度，则无法保证图片等比展示。
轮播图模块：如设置为固定高度，则在不同屏宽下图片都会保持同样高度，此时比例发生变化，就会对图片进行裁剪。 -
设置了固定比例
如模块设定了固定的比例，则会自动处理裁切，如未设置图片显示区域，则默认居中裁剪。 -
响应式图像处理
在主题的许多模块（轮播图、单图等）中使用了响应式图像。响应式图像是放大和裁剪宽幅图像的行业标准技术，以确保图像对电脑端和手机端具有相同的影响。会将拍摄您的照片放大，直到它完全覆盖显示区域，以便在不拉伸或扭曲图像的情况下进行缩放处理。
响应式处理前的商品显示
响应式处理后的商品显示
Q2:为什么设置了适应图片还是会被裁剪？
可能是打开了视差滚动效果。为了保证视差生效，会自动放大图片使其图片大小超过显示区域，自然会发生裁剪。
Q3:使用了建议尺寸，图片还是显示不全？
先检查高度设置是否为“适应图片”。如果设置无误，再检查是否开启了“视差效果”，关闭即可保持不裁剪。
如何联系我们：
SHOPLINE 拥有专业的本地支持团队，为有需求和疑惑的商家提供帮助。您可以通过联系SHOPLINE店铺后台及官方网页的实时客服来寻求SHOPLINE的帮助。
*如有SHOPLINE功能使用感受或需求建议，快点击【功能反馈】告诉我们吧！
评论