PAGES CONTENT

Get Started 开始 Mulai Mulakan Bắt đầu

Migrate to SHOPLINE 迁移到SHOPLINE Pindah ke SHOPLINE Berpindah ke SHOPLINE Đồng bộ dữ liệu về SHOPLINE

Your SHOPLINE account SHOPLINE账户 Akun SHOPLINE Anda Akaun SHOPLINE anda Tài khoản SHOPLINE của bạn

Orders 订单 Pesanan Pesanan Đơn hàng

Products 商品 Produk Produk Sản phẩm

Customer 客户 Pelanggan Pelanggan Khách hàng

Marketing 营销 Marketing Marketing Marketing

Apps 相关应用 Aplikasi Apps Ứng dụng

One page shop 一页商店 One page shop One page shop Cửa hàng một trang

Setting 设置 Pengaturan Tetapan Cài đặt

图片尺寸建议

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

您可以点击图片优化博客文章了解功能的详细介绍。

各组件图片尺寸建议

1.商品图

由于商品在电脑端的布局是可调整的,建议您优先考虑手机端的图片显示效果。

我们提供方形(1:1)、纵向(2:3)、横向(4:3)和原始比例4种商品比例选择,可根据您的产品形状,挑选适合的比例。

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

mceclip6.png

 

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

示例:

__1.jpg

 

使用背景纹理作为背景图

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

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

示例:

mceclip1.png

__2.jpg

 

其他注意事项

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

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

 

FAQ

Q1:为什么图片会发生裁剪?

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

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

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

响应式处理前的商品显示

mceclip7.png

响应式处理后的商品显示

mceclip8.png

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

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

 

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

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

 


 

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

 


 

评论