店铺装修

本页包含以下内容:

 

 

装修位于网站后台主页左侧导航栏,

如果您点击了“切换至旧版装修”按钮,则会进入旧版的装修页面:

mceclip0.png

 

装修模板页介绍

在装修模板页需要设置以下内容:
mceclip1.png

实时模板包括APP样式模板和PC网站样式模板,APP样式模板会展示在小程序、手机H5、APP等手机端访问的页面,PC网站样式模板即顾客在访问您的PC网站时会看到的模板。点击右侧的自定义按钮即可进入到对应的模板编辑页面。

mceclip2.png

您也可以自定义顾客通过手机或PC访问所显示的页面,设置完成,点击保存即可。

 

APP样式模板设置

mceclip3.png

APP样式模板的设置即销售渠道中在线店铺的店铺装修。点击此处查看在线店铺店铺装修的内容。

进入APP样式模板设置页面:

①网站左侧导航栏装修-模板-APP样式模板-自定义

②网站左侧导航栏在线店铺-店铺装修

 

PC网站样式模板设置

本节包含以下内容:

 

进入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

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

 

 

主体

主体包含以下组件:

mceclip26.png

标题组件

mceclip28.png

①文本框内输入标题内容,可以调整字体大小、颜色、加粗、斜体

②标题展示位置

居左显示,展示效果如下图

mceclip29.png

居中显示,展示效果如下图

mceclip30.png

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

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

mceclip31.pngmceclip32.png

⑤跳转按钮,展示效果如下图

mceclip33.png

mceclip34.png

默认为不勾选,勾选则可以自定义跳转按钮的文本内容、字体大小、颜色、加粗、斜体。

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

 

文本组件

mceclip35.png

①文本组件主要用于大段文字的展示

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

③上下边距、左右边距:可以输入数值调整边距大小或拖动调整边距大小。

 

公告组件

mceclip37.png

①公告内容,必填。最多设置100个字符,当内容过长时,手机或者pad上会滚动显示;另可以设置公告的背景颜色以及文字颜色;

②跳转链接,可选择公告跳转至首页、自定义页面或外部链接,如果无需跳转,则不填。
③如果有多个公告,点击添加公告按钮进行添加
mceclip38.png
④背景颜色、文字颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
⑤字体大小、页面边距,可以拖动调整或数值调整。
 

轮播图组件

mceclip39.png
①指示器样式
...,展示效果如下图
mceclip40.png
---,展示效果如下图
mceclip41.png
数字,展示效果如下图
mceclip42.png
无,则不设置指示器
②图片高度
mceclip43.png
可选择:适配首张高度、大、中、小四种。
③自动播放
mceclip44.png
默认为不勾选,勾选则需要设置自动播放时长
④图片效果
 
mceclip45.png
布局,可选择模板1或模板2,您可以在预览页面查看选择您需要的效果
填充方式,可选择填充或周边留白,您可以在预览页面查看选择您需要的效果
屏幕适配,可选择适配内容宽度或自适应屏幕宽度,您可以在预览页面查看选择您需要的效果
⑤添加图片
mceclip46.png
点击添加图片按钮在媒体库中选择需要在轮播图组件中需要展示的图片。
拖动图片右侧按钮,可以调整图片展示顺序。
点击对应图片可以进入到图片的详细编辑页面。
mceclip0.png
可以对轮播图的风格、背景图、中间图片、蒙层透明度、对齐方式、左侧(右侧)内容、左侧(右侧)按钮文本、左侧(右侧)跳转链接、左侧(右侧)按钮背景颜色、左侧(右侧)按钮边框颜色进行单独调整。
 

图片导航组件

图片导航
mceclip48.png
文本导航
mceclip49.png
①链接:可选择跳转至首页、自定义页面或外部链接,如果无需跳转,则不填。
mceclip47.png
①背景颜色、文字颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
②字体大小、页面边距、卡片间距,拖动或输入数值调整。
 
 

魔方布局组件

①选择模板
mceclip50.png
您可以在预览页面查看选择您需要的效果,选择需要的模板。
mceclip51.png
②选择模板后,点击添加图片,从媒体库选择需要上传的图片。
可选择图片跳转至首页、自定义页面或外部链接,如果无需跳转,则不填。
③图片间距、页面边距,拖动或输入数值调整。
 
 

相册组件

该组件用于图片展示。
mceclip52.png
①点击添加图片按钮,从媒体库选择需要展示的图片。
②页面边距、卡片间距,拖动或输入数值调整。
 
 

图文组件

mceclip53.png
①模板,您可以在预览页面查看选择您需要的效果
mceclip54.png
②左侧边距、右侧边距、顶部边距、底部边距、卡片间距、卡片圆角,拖动或输入数值调整。
③卡片对齐方式、内容对齐方式,可选择顶部、居中、底部。
④背景颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
⑤背景图,点击上传按钮从媒体库中选择需要展示的图片。
mceclip55.png
⑥选择模板后,点击下方灰色块可进入图文编辑页面
mceclip56.png
(1)点击上传按钮,从媒体库中选择需要展示的图片。
(2)背景颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
(3)卡片高度,拖动或输入数值调整。
mceclip0.png
(4)内容对齐方式,如果您设置了文本和按钮,可选择文本和按钮的对齐方式,可选择顶部、居中、底部。
mceclip1.png
(5)在文本框中输入需要展示的文字内容
mceclip2.png
(6)按钮文本,输入按钮中需要展示的文字.
(7)颜色、背景颜色、边框颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
(8)对齐方式,可选择顶部、居中、底部。
(9)上边距、圆角,拖动或输入数值调整。
(10)跳转链接,可选择跳转至首页、自定义页面或外部链接,如果无需跳转,则不填。
 
 

分割线组件

分割线主要用于平衡各组件之间的间距,让画面和谐美观
mceclip6.png
①分割线类型,可选择辅助空白或辅助线
mceclip7.png
(1)辅助空白,需要调整空白高度,拖动或输入数值调整。
mceclip8.png
(2)辅助线,可选择辅助线样式,可选择实现、虚线、点线。
(3)上下间距、左右间距,拖动或输入数值调整。
(4)辅助线颜色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
 
 

视频组件
mceclip3.png

①视频上传方式可选择,从媒体库中选择或粘贴视频链接
mceclip4.png
②背景图、封面图,点击上传按钮从媒体库中选择需要展示的图片。
mceclip5.png
③背景色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
④左侧边距、右侧边距、顶部边距、底部边距,拖动或输入数值调整。
 
 

底部

mceclip9.png
①风格,可选择展示三组菜单、两组菜单、一组菜单或不展示。
mceclip10.png
②显示收款方式,勾选则默认展示所有的收款方式,如果尚未设置收款方式,点击下方收款按钮,可跳转至设置收款页面。
③显示版权信息,勾选则默认展示版权信息。
④底部背景色,点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
mceclip11.png
⑤如果在风格处选择了需要展示菜单,需要点击对应位置添加菜单。
mceclip12.png
(1)标题,输入文本作为菜单展示的标题。
(2)类型,可选择菜单地图、社交媒体。
mceclip13.png
菜单地图需要点击更改按钮关联需要展示的菜单,

mceclip14.png

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

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

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

可选择单列展示或者双列展示。

mceclip14.png

类型选择社交媒体,需要完善社交媒体的相关信息,没有则可以不填。

 

弹窗广告

mceclip15.png

①开启页面弹窗,勾选则展示弹窗广告,不勾选不展示。

② 指示器样式,可选择...、---、数字或者不展示指示器。

mceclip16.png

③图片高度,可选择适配首张高度、大、中、小。

mceclip17.png

④弹窗频率,可选择仅一次、每次弹出或者指定频率。

⑤自动播放,勾选则需要设置自动播放时长,登录首页后第几秒弹出。

mceclip18.png

⑥配置图片,点击添加图片按钮在媒体库中选择需要在弹窗广告中需要展示的图片。

拖动图片右侧按钮,可以调整图片展示顺序。
 
 

模板设置

mceclip19.png
①颜色,可设置背景颜色、主题色、辅助色。点击色块选取需要的颜色,重新设置点击重置按钮恢复系统默认设置。
②字体,可单独设置全局、标题、副标题、顶部栏文字的字体,点击对应项目下方的修改按钮,选择需要展示的字体。
mceclip20.png
③网站图标,在网址旁边的小型方形图片或Logo,点击上传按钮从媒体库选择需要上传的logo图片。
mceclip22.png
④可以对主要按钮和次要按钮进行个性化的设置。
mceclip23.png
 
⑤网站尺寸,勾选则自适应屏幕宽度,不勾选则需要拖动或调整数值设置内容宽度。
 

菜单导航

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

创建预约页面

页面管理(自定义页面付费使用)

如果您需要在您的H5网站或者PC网站样式插入预约页面,您需要提前购买自定义页面应用。点击此处查看如何添加应用
mceclip24.png
页面左侧导航栏装修-页面管理,点击创建按钮-预约模版
预约页面需要设置关联商品,点击右侧的数据来源-商品类别;
您可以选择全部商品类别,也可以选择指定的商品类别,如果您家店铺里所有的商品都是服务类商品,则选择全部商品类别,反之,如果您家店铺里的商品不仅包含服务类商品还包括其他不同类型的商品,则需要选择对应的服务商品类别;
创建完预约模版页面后,您可以回到首页(pc 和h5)设置对应预约按钮,并关联预约的自定义页面即可(例如您首页的一个图文组件包含了一个按钮,这个按钮您需要跳转至预约页面,点击按钮的设置页,点击跳转链接,选择自定义页面这个选项,并选择刚创建好的预约页面即可完成关联);
选择完后,根据视频教程进行客户端的测试体验,无误后即可投入使用:
 
如果您认为上述过程太过复杂,就请咨询Pisell工作人员,我们有对应服务可以帮助您更加快速高效的完成对应设置!
这篇文章有帮助吗?
0 人中有 0 人觉得有帮助
分享