SHOPLINE教程

SHOPLINE图片尺寸建议

图片是店铺设计的重要素材,良好的图片质量以及合理的展示可以提高店铺整体设计感,间接促进店铺转化。为此,本文列举了SHOPLINE各组件推荐图片尺寸和一些大家在设计过程中可能遇到的问题,大家可以按照以下建议选择更合适的图片。

一、各组件图片尺寸建议

1、商品图

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

SHOPLINE图片尺寸建议

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

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

2、分类封面

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

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

3、分类 bannar

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

推荐尺寸 1920 px 宽 420 px 高

4、轮播图

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

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

SHOPLINE图片尺寸建议

 

电脑端推荐的比例 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

示例:

SHOPLINE图片尺寸建议

使用背景纹理作为背景图 系统会自动为你上传的图片进行横向与纵向的复制堆叠:

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

示例:

SHOPLINE图片尺寸建议

二、其他注意事项

建议提供尺寸尽可能大的原图,视觉展示效果最好。建议使用 .jpg 而不是 .png 的文件格式,图片加载速度更快。 主题会根据不同屏幕加载合适的图片大小,确保网站加载速率。

1、为什么图片会发生裁剪?

(1)模块设置为固定高度

  • 单图模块:在适配不同屏幕宽度以及手机设备的时候,为了保证内容的可读性,默认固定了该模块高度,则无法保证图片等比展示;
  • 轮播图模块:如设置为固定高度,则在不同屏宽下图片都会保持同样高度,此时比例发生变化,就会对图片进行裁剪。

(2)设置了固定比例

如模块设定了固定的比例,则会自动处理裁切,如未设置图片显示区域,则默认居中裁剪。

(3)响应式图像处理

在主题的许多模块(轮播图、单图等)中使用了响应式图像。响应式图像是放大和裁剪宽幅图像的行业标准技术,以确保图像对电脑端和手机端具有相同的影响。会将拍摄照片放大,直到它完全覆盖显示区域,以便在不拉伸或扭曲图像的情况下进行缩放处理。

响应式处理前的商品显示:

SHOPLINE图片尺寸建议

响应式处理后的商品显示:

SHOPLINE图片尺寸建议

2、为什么设置了适应图片还是会被裁剪?

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

3、使用了建议尺寸,图片还是显示不全?

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

广告合作
QQ群号:707632017

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com。(#改为@)

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

目录