类型：独立站平台
简介：跨境电商独立站SAAS建站平台，打通线上线下，智能工具优化销售链路。
图片是店铺设计的重要素材，良好的图片质量以及合理的展示可以提高店铺整体设计感，间接促进店铺转化。为此，本文列举了SHOPLINE各组件推荐图片尺寸和一些大家在设计过程中可能遇到的问题，大家可以按照以下建议选择更合适的图片。
一、各组件图片尺寸建议
1、商品图
由于商品在电脑端的布局是可调整的，建议优先考虑手机端的图片显示效果。我们提供方形（1:1）、纵向（2:3）、横向（4:3）和原始比例 4 种商品比例选择，可根据产品形状，挑选适合的比例。
注意：如选择了原始比例，则会以原图的比例显示，请尽可能保持所有商品图的比例一致，否则在列表展示中，商品会出现高低不齐的效果，影响浏览体验。
| 推荐的比例 | 2:3 | |
| 最小尺寸（移动端75%宽度） | 560 px 宽 | 840 px 高 |
| 推荐尺寸（详情页大图） | 1700 px 宽 | 2550 px 高 |
2、分类封面
可以在【店铺后台】>【商品】>【商品分类】中上传分类封面。
| 推荐的比例 | 1:1 |
| 推荐尺寸 | ≥ 1600 px |
3、分类 bannar
分类 bannar 图片可以在【店铺后台】>【商品】>【商品分类】中上传，当屏宽变化时会固定高度缩放宽度，存在一定裁切。
| 推荐尺寸 | 1920 px 宽 | 420 px 高 |
4、轮播图
我们支持电脑端和移动端独立配置图片，可以根据显示效果分别上传素材。
注意：如选择了固定高度，则会对图片进行裁切；如选择了视差效果，即便选择了适应图片，也会发生裁剪。如不希望图片被裁剪，建议选择适应第一张图片尺寸，以及关闭滚动视差效果。
| 电脑端推荐的比例 | 3:1 | |
| 推荐尺寸 | 1920 px 宽 | 650 px 高 |
| 移动端推荐的比例 | 1:2 | |
| 推荐尺寸 | 375 px 宽 | 500 px 高 |
5、特色轮播图
在 Expect、Soo、Metal、Flexible、Control 等模板中，有特色轮播图插件，图片和文字支持适配浏览器大小。
注意：上传电脑端图片时，不同设备屏幕会存在裁剪，注意不要把主要元素设计太靠边；上传移动端图片时，此组件文字会覆盖在图片之上，请在图片下方预留空间以免主要元素被遮挡。
| 电脑端推荐尺寸 | 高度设置为“全屏”时 | 1220 px 宽 | 1080 px 高 |
| 高度设置为具体值时 | 1152 px 宽 | 高度按适配值 | |
| 移动端推荐尺寸 | 高度设置为“全屏”时 | 1125 px 宽 | 1125 px 高 |
| 高度设置为具体值时 | 750 px 宽 | 高度按适配值 2 倍 |
6、单图
单图默认为固定高度，图片会发生裁剪，可以通过选择图片展示区域来控制不想被裁剪的焦点内容，或者更改图片高度为“适应图片”来避免裁剪。
| 电脑端推荐的比例 | 16:9 | |
| 推荐尺寸 | 1920 px 宽 | 1080 px 高 |
| 移动端推荐尺寸 | 750 px 宽 | 1020 px 高 |
7、图文列表
| 推荐的比例 | 4:3（会应用原图比例，此处只做建议） | |
| 推荐尺寸 | 650 px 宽 | 488 px 高 |
8、博客
| 推荐的比例 | 4:3（可配置） | |
| 推荐尺寸 | 650 px 宽 | 488 px 高 |
9、页脚推广
| 推荐的比例 | 16:9（可配置） | |
| 推荐尺寸 | 650 px 宽 | 488 px 高 |
10、常用组件推荐尺寸
| 组件名称 | 推荐尺寸 | 适用主题 |
| 图标申明 | 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 | 所有模板 |
11、特色组件推荐尺寸
| 组件名称 | 推荐尺寸 | 适用主题 |
| 主题设置里网站图标 | 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
|
12、结账页背景图尺寸
| 使用图片作为背景图 | 顶部 banner 图 | 左侧背景图 | 右侧背景图 |
| 1920 px * 200 px | 1048 px * 1048 px | 872 px * 1048 px |
示例：
| 使用背景纹理作为背景图 | 系统会自动为你上传的图片进行横向与纵向的复制堆叠：
所以图片的大小没有限制，可在编辑器上测试效果并调整。 |
示例：
二、其他注意事项
建议提供尺寸尽可能大的原图，视觉展示效果最好。建议使用 .jpg 而不是 .png 的文件格式，图片加载速度更快。 主题会根据不同屏幕加载合适的图片大小，确保网站加载速率。
1、为什么图片会发生裁剪？
（1）模块设置为固定高度
- 单图模块：在适配不同屏幕宽度以及手机设备的时候，为了保证内容的可读性，默认固定了该模块高度，则无法保证图片等比展示；
- 轮播图模块：如设置为固定高度，则在不同屏宽下图片都会保持同样高度，此时比例发生变化，就会对图片进行裁剪。
（2）设置了固定比例
如模块设定了固定的比例，则会自动处理裁切，如未设置图片显示区域，则默认居中裁剪。
（3）响应式图像处理
在主题的许多模块（轮播图、单图等）中使用了响应式图像。响应式图像是放大和裁剪宽幅图像的行业标准技术，以确保图像对电脑端和手机端具有相同的影响。会将拍摄照片放大，直到它完全覆盖显示区域，以便在不拉伸或扭曲图像的情况下进行缩放处理。
响应式处理前的商品显示：
响应式处理后的商品显示：
2、为什么设置了适应图片还是会被裁剪？
可能是打开了视差滚动效果。为了保证视差生效，会自动放大图片使其图片大小超过显示区域，自然会发生裁剪。
3、使用了建议尺寸，图片还是显示不全？
先检查高度设置是否为“适应图片”。如果设置无误，再检查是否开启了“视差效果”，关闭即可保持不裁剪。
