店铺装修

本页包含以下内容:

装修位于网站后台主页左侧导航栏,点击进入后如下图所示,您点击自定义按钮后即可进入网站样式的模板设置:

视频教程合集如下,请参考:

网站样式模板设置

本节包含以下内容:

 

进入PC网站样式模板页面

mceclip5.png

 

页面介绍

①PC主页设置主要分为四部分

顶部,PC主页的顶部,展示店铺基础信息以及页面导航。

mceclip6.png

主体,PC主页主要展示的内容,可以在此页面设置标题、文本、公告等组件。

mceclip7.png

底部,展示网站的其他信息,包括支付方式、供应商等。

mceclip8.png

弹窗广告,顾客访问PC主页后,弹出的广告。

mceclip9.png

②模板设置,在此页面可以对主页的颜色、字体等进行设置。

mceclip10.png

③主体组件名称,在这里将展示您主页的主体部分所设置的组件,点击可以查看该组件的相关设置。

④预览页面,您对页面做的更改,将会展示在此处。

⑤组件设置,点击任意组件后,相关设置将展示在此处。

⑥自适应大小,可以调整预览页面的展示大小

   组件列表,展示当前预览页面添加的所有组件,可以拖动调整组件顺序。

⑦保存,点击后,您对页面做的修改将保存并展示在客户端

⑧返回,点击后将返回至上一个页面

 

顶部

①风格:可选菜单居中、菜单居左

居中展示效果

mceclip11.png

居左展示效果

mceclip12.png

②固定到浏览器/悬浮于顶部

选择固定到浏览器,当顾客上下滑动浏览PC主页时,顶部栏将始终展示在页面中

选择悬浮于顶部,当顾客向下滑动浏览PC主页时,顶部栏将不显示

③菜单

mceclip13.png

点击更改可以进入菜单编辑页面

mceclip14.png

添加菜单,将跳转至装修-菜单导航-添加菜单页面,点击此处查看详细的菜单添加方法。

选择需要添加的菜单后,点击选择按钮,将该菜单添加至顶部栏。

点击取消,将取消菜单页在顶部栏的关联。

菜单文字大小,可以输入字号或拖动调整菜单文字大小。

菜单文字颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。

④logo:

上传logo,点击上传按钮,从媒体库选取需要上传的logo图片,展示效果如下图

mceclip15.png

不上传logo将展示店铺名称,展示效果如下图

mceclip16.png

⑤顶部栏高度、颜色

mceclip17.png

顶部栏高度,可以输入字号或拖动调整顶部栏高度。

顶部栏高度颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。

⑥自定义背景图

mceclip18.png

顶部栏的背景图,默认为不勾选,勾选则可以自定义顶部栏的背景图。

点击上传按钮,从媒体库选取需要上传的图片。

可选择背景图的展示效果。

居中,展示效果如下图

mceclip19.png

填充,展示效果如下图

mceclip20.png

拉伸,展示效果如下图

mceclip21.png

铺满,展示效果如下图

mceclip22.png

⑦顶部栏公告

mceclip23.png

顶部栏公告,默认为不勾选,勾选则可以自定义顶部栏公告。

mceclip24.png

上图红框内为顶部栏公告展示区域。

公告文本,输入文字设置公告内容。

公告背景色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。

mceclip25.png

跳转链接,可选择公告跳转至首页、自定义页面或外部链接,如果无需跳转,则不填。

 

 

主体

轮播图

轮播图设置需要先设置图片相关内容,最后进行相关基础设置
  1. 图片:

轮播图可以上传多张图片,使图片左右滚动/上下滚动,也可以在图片中添加文字/图片/按钮
点击添加图片,上传图片,可同时选中多张图片,上传好图片后,如果在轮播图的图片基础上需要展示文字/图片/按钮,则需要选择为图片添加文字/图片/按钮的图片。点击图片进入编辑页面

风格

进入图片的编辑模式,可以选择风格1/风格2
风格1为普通展示,即上传的图片为背景图,再添加其他内容
风格2位叠加展示,即上传的图片为背景图,再上传一张背景图,是两张背景图重叠展示,设置和效果如下:
图4.png

蒙层透明度

在上传了背景图后,会有默认的0.4值蒙层透明度,是为背景图添加一层黑色的蒙层,使图片看起来会要黑一些,设置的值为0.01-1,值越大蒙层越黑。根据喜好设置即可

内容设置

风格1
使用新版内容设置,尽量不使用富文本(适应会些许问题,需要专业人士调整)
可以选择添加图片/文本/按钮,每个所添加的内容都可以多次重复添加
  • 添加图片:上传一图片(下图是展示效果)。叠加的图片可以更改图片的宽度,若设置图片宽度超出了图片实际的宽度,则图片只展示实际宽度而不会在放大显示
图6.png
图7.png
  1. 每个图片内容仅上传一张图片,若有多图片需要上传,添加多个图片内容模块即可
  2. 每个图片模块里可以设置上下边距
  • 添加文本:输入文本文案(下图是展示效果),可以调整文案的字号/粗细/斜体/颜色/显示位置,以及设置文本内容的左右边距,添加链接
图9.png
  1. 每个文本内容仅支持一种字号/粗细/斜体/颜色/显示位置,若有文本文案字号/粗细/斜体/颜色/显示位置需要区分的,则添加多个文本内容模块设置即可
  2. 每个文本模块里可以设置上下边距
  • 添加按钮:输入按钮的名称,可以调整字号/粗细/斜体/颜色/显示位置,以及设置按钮框和背景色。

图12.png

默认展示两个按钮,可以根据实际情况设置内容,可以只设置一个按钮内容;
如果两个按钮都设置的话,会平行展示按钮,如下图展示效果:
图11.png
  1. 每个按钮内容里可以添加两个按钮框,展示方式为平行展示,若需要上下展示则在添加一个按钮即可
  2. 只有按钮模块可以添加链接
  3. 每个按钮的模块里可以设置上下边距
风格2
其内容与风格1一样,所有的内容设置也与风格1一样,其最主要的区别为内容为左右显示,需要设置左侧内容和右侧内容
边距设置
可以为图片里的内容设置顶部/底部/左/右,数值为0-100;内容设置可设置对齐方式(居左/居中/居右,顶部/中部/底部)
  1. 基本设置

在选中轮播图组件后,左侧弹窗上半部分的位置:根据页面整体及喜好选择对应的设置模式即可,注意其中布局的模版3和模版4为上下滚动方式
指示器样式
若上传了多张轮播图,在图片下方会有滚动的指示的提示显示,选择喜欢的即可
显示左右切换按钮
勾选开启显示轮播图左右可点击的中括号
图片高度
可以设置上传的图片高度,根据整体排版选择首张高度或自定义高度(建议使用适配首张高度和自定义高度)
若选择自定义高度,则需要设置一个高度的数值,数值最高可填写2000
轮播图播放
可设置是否自动播放以及播放的时长,最多可以设置10,单位是秒
若轮播图只上传了一张图,图片是不会自动播放,是静止的状态
布局
有4个模版
模版1: 默认版,正常显示图片上传的大小(但会受图片高度的影响),左右轮播
模版2: 会使上传的图片的大小缩小一倍(会受图片高度的影响),左右轮播
模版3: 默认版,正常显示图片上传的大小(但会受图片高度的影响),上下轮播(与模版1一样,播放的方式为上下)
模版4: 会使上传的图片的大小缩小一倍(会受图片高度的影响),上下轮播(与模版2一样,播放的方式为上下)
填充方式
默认为填充,设置为周边留白会在上传的图片左右会留出一小部分的空白部分(会受布局影响)
屏幕适配
默认是自适应屏幕宽度,若选择适配内容宽度,此宽度为上传图片后设置的内容宽高度(不建议使用此宽度)
轮播图图片背景尺寸建议:
宽度:1920px(固定)
高度:1080px(根据页面排版调整高度即可)
 

图文

文字/图片/按钮搭配使用,做为装修主要使用的组件,其多种模版可以满足不同页面排版
根据不同排版选择不同的模版,每个模版对应不同个数的卡片,卡片里可以插入设置文字/图片/按钮
 

背景

模版和卡片都可以设置背景图片(自定义图片,可以调整图片的高宽度(卡片背景不可调整高宽度),若图片尺寸过小,实际上传后的效果图片会比较模糊),也可以设置颜色,模版和卡片都可以设置,若都设置两个颜色会重叠显示,若设置了背景图又设置了颜色,颜色会被覆盖。

边距设置

模版和卡片都可以设置顶部/底部/左/右边距,根据偏好设置即可。
模板的边距设置
33.png
卡片的边距设置(需要点击下图位置的卡片,进入详情页后可以设置)

卡片内容

推荐使用新版内容设置(不建议使用富文本内容设置),新版内容设置可添加文字内容/图片/按钮,
使用新版内容设置,尽量不使用富文本(适应会些许问题,需要专业人士调整)
可以选择添加图片/文本/按钮,每个所添加的内容都可以多次重复添加
添加图片:上传一图片,可以更改图片的宽度,若设置图片宽度超出了图片实际的宽度,则图片只展示实际宽度而不会在放大显示
添加文本:输入文本文案,可以调整文案的字号/粗细/斜体/颜色/显示位置,以及设置文本内容的左右边距,添加链接
添加按钮:输入按钮的名称,可以调整字号/粗细/斜体/颜色/显示位置,以及设置按钮框和背景色
  1. 每个卡片的文本内容仅支持一种字号/粗细/斜体/颜色/显示位置,若有文本文案字号/粗细/斜体/颜色/显示位置需要区分的,则添加多个文本内容模块设置即可
  2. 每个按钮内容里可以添加两个按钮框,展示方式为平行展示,若需要上下展示则在添加一个按钮即可
  3. 整个卡片可以设置链接跳转
  4. 内容设置可设置对齐方式(居左/居中/居右,顶部/中部/底部)

 

图片导航

设置主要的类别,将icon上传后设置跳转的商品类别链接,以便用户更快捷的浏览购买商品
图片导航区分两种,一种图文(图片+文字命名),一种纯文字导航,根据偏好进行设置即可,各icon之间可以调整间距以,命名的文字可以设置颜色/大小,整个组件可以设置背景颜色以及组件的页面边距
  1. 导航(图片/文字)仅支持行显示
  2. 图片导航每行导航仅支持至多5个,文字导航目前没有限制

 

标题

将文字放进组件中,支持字体大小/颜色/粗细,居中或居左显示,以及组件的背景图/颜色和跳转链接设置

文本(不建议使用)

富文本编辑器,可以支持图片/文字/外部链接,当有一部分文字需要不同的字体来排版显示时可以考虑使用。
由于富文本的适应目前还未完善,不建议大篇文案的使用该组件,否则在前端显示会出现错误的排版

商品列表

在页面中添加店铺内的商品,根据偏好选择商品类别或指定商品

数据来源

点击商品类别按钮(如下图),分为商品类别和自定义商品
 

商品类别

该商品类别来自店铺后台商品-类别管理所创建的,可以勾选全部类别或指定类别,若选择指定类别,需要勾选需要显示的类别

自定义商品

若选择自定义商品,点击添加商品/商品组,选择店铺内的商品/商品组即可
商品组:店铺后台商品-商品组所创建

列表样式

根据偏好选择显示的样式

商品卡片样式

可以设置商品基本信息是否显示

公告

设置一组公告,将文字文案放入组件的标题中,若文案过长则会滚动播放(也会跟进用户使用的屏幕大小适应),可以调整组件的背景色以及文案文本的小大/颜色/粗细和文案文本的边距等。

相册

图片展示,将需要展示的图片上传至组件中,若图片超过10张,在前端会显示查看全部按钮/See All(按钮名称固定,无法更改),上传后显示样式固定的,一行为5张图,可以设置每张图片之间间距以及组件与页面的间距

魔方布局

根据不同模版自由组合图片,选择偏好的模版,根据模版上提示的比例上传对应的图片,若图片的比例超出了建议的比例,则图片在前端会自适应该模版建议比例的效果。可以设置该组件的页面边距以及图片直接的间距

自定义模版

若选择自定义模版,横竖布局最多可以选择8个,每个方块上传的图片都是1:1
图片比例在后台是没有标注的,按以下的比例上传即可:
正方形图:1:1 横的长方形图:16:9
竖的长方形图:9:16
 

视频

支持上传 .mp4 .mov .m4v .3pg .m3u8的视频,可以自定义上传一张视频的封面图(建议尺寸16:9),其他设置根据偏好进行设置即可。视频在前端需要手动点击播放方可播放视频。

分割线

此组件主要作用是辅助,分为辅助空白、辅助实线/点/虚线,根据页面排版情况选其一调整高度即可。
58.png
59.png
60.png
 

表单

网页可以关联表单功能,使其用户在浏览网页时可以填写信息,后台可以搜集用户填写的信息。
关联表单后,可以设置显示的样式以及整个表单组件的背景图/背景色以及边距等,根据偏好进行设置即可。
关联的表单需要先在后台进行创建,创建好的表单可以被关联到装修中。
表单是收费使用的应用:
AU$3 / 1 月或AU$33 / 1 年
 

弹窗广告

在页面加载完成后会自动跳出一个板块可以根据偏好设置弹窗频率,该板块仅支持图片上传,可上传多张图片
 

网页顶部设置

主要设置网页的顶部导航部分,需要先添加菜单导航,关联一个菜单导航,并设置该菜单的文字大小和整个导航的高度,如果需要展示Logo则上传logo到对应的位置即可。
 
如果顶部的菜单导航页添加菜单需要在管理后台-装修-页面导航-添加菜单
65.png
66.png
67.png
 

Logo设置

可以选择居左或居右两种展示方式,并勾选一种展示的模式固定顶部或悬浮:
若选择悬浮,当用户在滑动页面时导航时悬浮于顶部的,并且悬浮的导航颜色与默认的导航背景颜色可以不一致,这样可以增加一个简单的交互效果,使其网页视觉效果上更高级些
68.png
69.png
 

导航设置

可以设置导航的背景色/自定义背景图,根据偏好设置即可。
在关联了菜单后,可以设置菜单文字的大小以及logo的上下边距(边距越小,logo越大),若菜单有二级/三级可以设置下拉时的圆角(数值越大越圆)

导航内容添加

可以在导航的位置添加文本/图片/按钮,设置方式与图文/轮播图添加内容一样,根据偏好设置即可。

公告

顶部专有的导航,在设置了公告后,前端显示的位置在最顶部,设置的方法与公告组件一致。

其他设置

可以勾选是否显示个人中心/购物车/语言切换
也可以上传自定义的个人中心/购物车的icon,若不上传则按系统默认的显示

网页底部设置

底部设置为网页的底部样式,最多可以添加3组菜单,底部仅支持背景色的调整
 

菜单

分为菜单地图和社交媒体

菜单地图

选择一个菜单关联,并设置菜单名字的默认颜色以及选中的颜色,设置显示的方式,也可以自定义上传一个icon,在前端用户也可以点击跳转

社交媒体

添加已有的社交媒体主页链接(PC),目前微信仅能上传图片(微信二维码),当用户鼠标指到微信icon时,上传的图片就会显示出来,社交媒体目前市场上流行的社交媒体都有,将对应的社交媒体主页链接放入对应的框即可,若所需要的社交媒体没有,可以自定义上传一个icon,在前端用户也可以点击跳转,输入社交媒体整个菜单的名字以及icon颜色和选择颜色
 

网页基本设置

网页的字体、颜色、图标、尺寸、按钮颜色的设置

颜色

针对主页的背景色和全网页的主题色以及辅助色

字体

针对全网页/标题/副标题header设置对应的字体,根据偏好设置即可
网站图标
该图标显示在网站名称的旁边,如下图:
上传图标图片大小建议尺寸:100px*100px

按钮

可以设置主/次要按钮的背景色/边框色,以及按钮文字的颜色(不建议修改,因为在有内容添加(按钮)的组件中,按钮都可以单独在进行设置以下信息)
网站尺寸
默认1400,不建议修改

自定义页面

在店铺后台装修-页面管理中选择/创建自定义页面
自定义页面所使用的所有组件与主页的组件是一样的,其中顶部和底部是与主页一致的(自定义页面无法修改),在页面设置中,可以进行对该页面的背景色进行设置调整、自定义页面命名和描述设置。

菜单导航

在店铺后台的装修-菜单导航,可以设置添加装修里各组件需要的菜单导航
添加菜单,输入菜单导航的名称以及关联一个链接,支持二级/三级菜单的创建添加

链接

后台所需要关联链接的地方都是一样的,可以选择外部链接、自定义页面、规则(退换货、服务协议、隐私政策)、商品分类、分类详情页等,选择一种添加即可。其中扫码点餐页为餐饮套餐商家专有的页面,需要开通该应用后才会显示可以添加。

个人中心/商品列表页/商品详情页

在网页顶部的下拉条中可以设置商品列表页/商品详情页/个人中心页

商品列表页

可以针对商品列表页所关联的商品设置、列表展示样式设置以及基本信息显示设置,设置后网页有关联商品分类页的链接,用户点击跳转后就会以设置的显示商品列表。
也可以在商品列表页内添加装修组件,添加的装修组件会添加了商品分类的链接中体现出来。
设置的方法与装修组件的商品列表一致,但此商品列表页管理的是全局
 

商品详情页

可以对商品详情的信息设置是否显示;以及在商品详情页内添加装修组件,添加的装修组件会在每一个商品详情页中展示出来,所有的组件设置方法与装修内的一样。
95.png
 

个人中心页

可以对个人中心页面的功能栏进行自定义命名,但每个栏都是固定的跳转,即便重新命名了跳转的还是默认对应的内容页面

小程序样式模板设置

97.jpeg

内页具体设置步骤与网站装修流程一致,可以参考上述操作!

 

页面管理

如果您需要在您的小程序或者网站插入其他页面,您可以使用自定义页面。
mceclip24.png
页面左侧导航栏装修-页面管理,点击创建按钮。
98.png
可选择创建通用模板、预约模版。
通用模版的内容设置与PC主页装修方式一致。
预约模板的内容设置与PC主页装修方式一致。
 

菜单导航

菜单导航主要应用于PC网站主页的顶部栏以及底部,有助于引导客户在您的店铺中更方便地进行浏览。
mceclip26.png
点击左侧导航栏装修-菜单导航,进入菜单导航页。点击添加菜单进入菜单创建页面。
mceclip27.png
①完善菜单组标题。
②点击添加菜单按钮,添加所有需要展示在此菜单组中的菜单项。
mceclip28.png
③完善菜单项名称,并设置跳转链接,可选择首页、自定义页面、外部链接。
④添加完成后,可点击对应菜单项右侧编辑或删除按钮进行对应操作。
⑤全部添加完成后,点击页面下方保存按钮,保存该菜单组。
这篇文章有帮助吗?
0 人中有 0 人觉得有帮助
分享