DIY模版

新建DIY模板

进入商城，点击应用->模板管理，点击“新建模板”按钮，界面跳转至DIY模板组件设置界面，添加组件，输入组件设置、模板名称，保存成功，新增DIY模板。

如图所示：

编辑DIY模板

进入商城，点击应用->模板管理，选择需要更改的DIY模板，点击“编辑”按钮，可对DIY模板进行更改（应用中的DIY模板只能点击预览图上面的“编辑”按钮）。

如图所示：

删除DIY模板

进入商城，点击应用->模板管理，选择需要删除的DIY模板，点击“删除”按钮，可删除DIY模板；默认模板与应用中的DIY模板不可删除。

如图所示：

应用DIY模板

进入商城，点击应用->模板管理，选择需要应用模板，点击“应用”按钮，可应用模板；当前应用的模板影响移动端首页样式的呈现。

如图所示：

1. DIY模板新增轮播图组件

在DIY模板->编辑模板【基础组件】列表界面中，拖动“轮播图”组件至手机预览图界面或单击基础组件下【轮播图】组件，在轮播图设置区域：上传轮播图片、选择模板形式、颜色，保存成功，该DIY模板新增轮播图组件成功。

如图所示：

说明：

选择模板：控制轮播图是否有前置背景；

上传图片：图片最多上传10张，图片每页展示18张，展示商品库所有图片，也可从本地上传；

轮播图可更改展示顺序，图片的排列顺序与移动端轮播图播放顺序一致；

“标题”可作为图片标记，不在移动端呈现；

“链接”可选择商品、分类、店铺、自定义、装修页面”
商品：跳转指定商品详情界面；
分类：跳转商品分类呈现界面；
店铺：跳转对应店铺主页；
自定义：跳转指定内链地址界面，自定义链接配置营销插件链接，当营销插件不开启或者没有该营销插件时，移动端该组件不展示；
装修页面：“跳转已装修的模版（二级页面）”

添加板块：添加新的导航图片，达到最大轮播图数量时隐藏；

前景颜色：选择多图模板2才会存在，可配置轮播图左右两侧的前景颜色；

背景颜色：轮播图组件的背景色；

指示点默认颜色：轮播图没选中的指示点呈现颜色；

指示点选中颜色：轮播图选中的指示点呈现颜色；

指示点背景色：指示点的背景颜色；

图片倒角：控制轮播图圆角或直角呈现；

轮播图高度：轮播图组件高度，默认140px（注意：高度会影响轮播图在首页的呈现）；

左右边距： 轮播图组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：轮播图组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

轮播图组件可添加若干个；

轮播图组件不可添加视频；

2.DIY模板新增导航组件

在DIY模板->编辑模板【基础组件】列表界面中，拖动“导航组”组件至手机预览图界面或单击基础组件下【导航组】组件，在导航设置区域：上传图片、选择每行展示数量、颜色等，保存成功，该DIY模板新增UI导航组件成功。

如图所示：

说明：

导航：一个导航组件最多能配置10个UI导航；

一个UI导航只能上传一张图片；

“标题”：导航栏名称，会呈现在移动端首页；

“链接”：可选择商品、分类、店铺、自定义、装修页面；”

商品：跳转指定商品详情界面；
分类：跳转商品分类呈现界面；
店铺：跳转对应店铺主页；
自定义：跳转指定内链地址界面，自定义链接配置营销插件链接，当营销插件不开启或者没有该营销插件时，移动端该组件不展示；
装修页面：“跳转已装修的模版（二级页面）”

添加模板：添加新的UI导航，达到最大值时，自动隐藏；

每行轮播图数量：每列UI导航最多展示数，超过会进行换行呈现；

标题颜色：UI导航的标题颜色配置；

背景颜色：配置导航组件左右背景色；

页面间距：导航组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

*按钮圆角：调整按钮图片圆角 直角；

图片尺寸：调整按钮图片尺寸大小；

导航组件可添加多个，导航可添加相同的配置；

导航组件排序：导航可切换展示顺序，导航的排列顺序与移动端导航呈现顺序一致，鼠标点击选中之后上下拖动；

如图所示：

3.DIY模板新增商品分类组件

在DIY模板->编辑模板【基础组件】列表界面中，拖动“商品分类”组件至手机预览图界面或单击基础组件下【商品分类】组件，在商品分类设置区域：选择颜色；保存成功，该DIY模板新增商品分类组件。

如图所示：

说明：

diy分类：是否开启 开关；设置分类名称、选择移动端首页展示的分类商品
开启，则按照自定义分类 商品展示；如图所示：

关闭，则默认按照商品分类顺序展示。

文字颜色：未选中的商品分类的文字颜色，在移动端首页、手机预览图界面会呈现；

文字选中颜色：选中的商品分类的文字颜色，在移动端首页、手机预览图界面会呈现；

分割线颜色：商品分类与商品分类之间分割线的颜色；

选中下标线颜色：选中的商品分类下标线颜色；

背景颜色：商品分类整个组件的左右背景颜色，包括展示的商品部分；

页面间距：商品分类组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

商品分类来源：当前系统中所有的一级商品分类，且具体分类名称只会呈现在移动端，不会呈现在组件编辑界面的右侧手机预览图中；

商品分类组件可添加多个；

4.DIY模板新增图片组件

在DIY模板->编辑模板【基础组件】列表界面中，拖动“图片”组件至手机预览图界面或单击基础组件下【图片】组件，在图片设置区域：上传图片；保存成功，该DIY模板新增图片组件。

如图所示：

说明：

图片组件：只能上传一张图片，可添加多个组件；

“标题”：即标题名称，移动端不展示；

“链接”：可选择商品、分类、店铺、自定义、装修页面；
商品：跳转指定商品详情界面；
分类：跳转商品分类呈现界面；
店铺：跳转对应店铺主页；
自定义：跳转指定内链地址界面，自定义链接配置营销插件链接，当营销插件不开启或者没有该营销插件时，移动端该组件不展示；
装修页面：跳转已装修好的模版（二级页面）

背景颜色：可配置图片整个组件的左右背景颜色；

图片倒角：控制图片圆角或直角在移动端首页呈现；

左右边距：图片组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：图片组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

5.DIY模板新增搜索组件

在DIY模板->编辑模板【基础组件】列表界面中，拖动“搜索”组件至手机预览图界面或单击基础组件下【搜索】组件，在搜索设置区域：上传图片；保存成功，该DIY模板新增搜索组件。

如图所示：

说明：

样式选择：选择搜索栏呈现样式；

样式1：只有搜索框与个人消息展示的呈现；
样式2：比样式1多一张可供上传的图片；
样式3：比样式1多一个地址展示（需要对接腾讯地图才会有实际的定位效果）；
样式选择：选择搜索栏呈现样式；

背景颜色：可配置搜索整个组件的左右背景颜色；

是否显示消息：控制个人消息图标是否展示；

框体样式：配置搜索框是圆角或者直角；

文本位置：定义搜索文本居中还是靠左；

页面间距：搜索组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

搜索框可以添加多个，在模板中的第一个组件为搜索组件组件时，此搜索组件具有移动前端悬浮置顶的效果，其余搜索组件无此展示效果；

6.DIY模板新增秒杀组件

在DIY模板->编辑模板【营销组件】列表界面中，拖动“秒杀”组件至手机预览图界面或单击基础组件下【秒杀】组件，在秒杀设置区域设置信息；保存成功，该DIY模板新增秒杀组件。

如图所示：

说明：

秒杀组件的呈现：秒杀插件没有安装或秒杀插件设置关闭，秒杀组件不呈现；

商品数量：秒杀商品的展示数量，最大为10，最小为1，有秒杀中的商品会呈现在移动端首页，左右滑动查看商品；
数据来源：有正在进行秒杀中商品，且具体商品只会呈现在移动端，不会呈现在组件编辑界面的右侧手机预览图中，商品顺序与秒杀列表中商品的顺序呈现一致；

秒杀组件可添加多个；

秒杀图片：标记此活动为秒杀活动；

秒杀小图标：秒杀活动的小图标；

倒计时背景色：秒杀活动结束倒计时控件的背景颜色；

主题风格：秒杀活动商品价格展示的字体颜色；

背景颜色：可配置秒杀整个组件的左右背景颜色；

左右边距：秒杀组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：秒杀组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

秒杀组件的前端呈现：当DIY模板添加秒杀组件后，秒杀插件设置关闭 或者 开启，但没有一个正在进行秒杀中的商品，此时移动端首页不呈现秒杀活动；

7.DIY模板新增卡券组件

在DIY模板->编辑模板【营销组件】列表界面中，拖动“卡券”组件至手机预览图界面或单击基础组件下【卡券】组件，在卡券设置区域设置信息；保存成功，该DIY模板新增卡券组件。

如图所示：

说明：

卡券组件的呈现：卡券插件没有安装或卡券插件设置关闭，卡券组件不呈现；

卡券数量：卡券的展示数量，最大为10，最小为1，有卡券会呈现在移动端首页，左右滑动查看卡券；
数据来源：有发布的卡券，不会呈现在组件编辑界面的右侧手机预览图中，卡券顺序与卡券列表中的顺序呈现一致；

卡券组件可添加多个；

卡券图片：标记此活动为卡券活动；

卡券小图标：卡券活动的小图标；

主题风格：卡券活动展示的字体颜色；

背景颜色：可配置卡券整个组件的左右背景颜色；

左右边距：卡券组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：卡券组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

8.DIY模板新增拼团组件

在DIY模板->编辑模板【营销组件】列表界面中，拖动“拼团”组件至手机预览图界面或单击基础组件下【拼团】组件，在拼团设置区域设置信息；保存成功，该DIY模板新增拼团组件。

如图所示：

说明：

拼团组件的呈现：拼团插件没有安装或拼团插件设置关闭，拼团组件不呈现；

商品数量：拼团商品的展示数量，最大为10，最小为1，有拼团中的商品会呈现在移动端首页，左右滑动查看商品；
数据来源：有正在进行拼团中商品，且具体商品只会呈现在移动端，不会呈现在组件编辑界面的右侧手机预览图中，商品顺序与拼团列表中商品的顺序呈现一致；

拼团组件可添加多个；

拼团图片：标记此活动为拼团活动；

拼团小图标：拼团活动的小图标；

主题风格：拼团活动商品价格展示的字体颜色；

背景颜色：可配置拼团整个组件的左右背景颜色；

左右边距：拼团组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：拼团组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

拼团组件的前端呈现：当DIY模板添加拼团组件后，拼团插件设置关闭 或者 开启，但没有一个正在进行拼团中的商品，此时移动端首页不呈现拼团活动；

9.DIY模板新增积分商城组件

在DIY模板->编辑模板【营销组件】列表界面中，拖动“积分商城”组件至手机预览图界面或单击基础组件下【积分商城】组件，在积分商城设置区域设置信息；保存成功，该DIY模板新增积分商城组件。

如图所示：

说明：

积分商城组件的呈现：积分商城插件没有安装或积分商城插件设置关闭，积分商城组件不呈现；

商品数量：积分商品的展示数量，最大为10，最小为1，有积分商品会呈现在移动端首页，左右滑动查看商品；
数据来源：有参与积分商城的商品，且具体商品只会呈现在移动端，不会呈现在组件编辑界面的右侧手机预览图中，商品顺序与积分商品列表中商品的顺序呈现一致；

积分商城组件可添加多个；

积分商城图片：标记此活动为积分商城；

积分商城小图标：积分商城的小图标；

主题风格：积分商品价格展示的字体颜色；

背景颜色：可配置积分商城整个组件的左右背景颜色；

左右边距：积分商城组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：积分商城组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

积分商城组件的前端呈现：当DIY模板添加积分商城组件后，积分商城插件设置关闭 或者 开启，但没有一个参与积分商城的商品，此时移动端首页不呈现积分商城；

10.DIY模板新增预售组件

在DIY模板->编辑模板【营销组件】列表界面中，拖动“预售”组件至手机预览图界面或单击基础组件下【预售】组件，在预售设置区域设置信息；保存成功，该DIY模板新增预售组件。

如图所示：

说明：

预售组件的呈现：预售插件没有安装或预售插件设置关闭，预售组件不呈现；

商品数量：预售商品的展示数量，最大为10，最小为1，有预售商品会呈现在移动端首页，左右滑动查看商品；
数据来源：有正在进行预售中商品，且具体商品只会呈现在移动端，不会呈现在组件编辑界面的右侧手机预览图中，商品顺序与预售商品列表中商品的顺序呈现一致；

预售组件可添加多个；

预售活动图片：标记此活动为商品预售；

预售活动小图标：商品预售的小图标；

主题风格：预售商品价格展示的字体颜色；

背景颜色：可配置商品预售整个组件的左右背景颜色；

左右边距：预售组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：预售组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

预售组件的前端呈现：当DIY模板添加预售组件后，预售插件设置关闭 或者 开启，但没有一个正在进行预售中的商品，此时移动端首页不呈现商品预售；

11.DIY模板新增店铺组件

在DIY模板->编辑模板【营销组件】列表界面中，拖动“店铺”组件至手机预览图界面或单击基础组件下【店铺】组件，在店铺设置区域设置信息；保存成功，该DIY模板新增店铺组件。

如图所示：

说明：

店铺组件的呈现：店铺插件没有安装或插件设置关闭，店铺组件不呈现；

店铺数量：店铺的展示数量，最大为10，最小为1，有店铺会呈现在移动端首页，左右滑动查看店铺；
数据来源：当前系统中已经审核通过的店铺，且具体店铺数据只会呈现在移动端，不会呈现在组件编辑界面的右侧手机预览图中，店铺顺序与店铺列表中店铺的顺序呈现一致；

店铺组件可添加多个；

店铺标题：店铺组件的名称；

店铺标题背景：店铺标题背景，图片背景；

标题颜色：店铺组件名称的字体颜色；

背景颜色：可配置店铺整个组件的左右背景颜色；

左右边距：店铺组件与手机屏幕的左右间距，默认10px，最大100px，最小0px；

页面间距：店铺组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

店铺组件的前端呈现：当DIY模板添加店铺组件后，店铺插件设置关闭，此时移动端首页不呈现店铺推荐；

12.DIY模板新增广告组件

在DIY模板->编辑模板【工具组件】列表界面中，拖动“广告”组件至手机预览图界面或单击基础组件下【广告】组件，在广告设置区域设置信息；保存成功，该DIY模板新增广告组件。

如图所示：

说明：

广告位：一个广告组件只有2个广告位，两个广告位之间可以切换顺序，切换顺序后会在移动端首页呈现；

“标题”：广告名称，移动端首页不呈现；

“链接”：可选择商品、分类、店铺、自定义、装修页面；
商品：跳转指定商品详情界面；
分类：跳转商品分类呈现界面；
店铺：跳转对应店铺主页；
自定义：跳转指定内链地址界面，自定义链接配置营销插件链接，当营销插件不开启或者没有该营销插件时，移动端该组件不展示；
装修页面：跳转已装修好的模版（二级页面）；

前景颜色：可配置广告的左右前景颜色；

背景颜色：广告组件的背景色；

图片倒角：控制广告图片圆角或直角在移动端首页呈现；

背景左上倒角、左下倒角、右上倒角、右下倒角：控制整个广告组件以圆角或直角在移动端首页呈现；

页面间距：逛逛组件与上一个组件或屏幕顶部的距离，默认0px，最大100px；

广告组件可以添加多个；

13.DIY模板新增背景组件

在DIY模板->编辑模板【工具组件】列表界面中，拖动“背景”组件至手机预览图界面或单击基础组件下【背景】组件，在背景设置区域设置信息；保存成功，该DIY模板新增背景组件。

如图所示：

说明：

背景颜色：控制整个DIY模板的左右背景色，在移动端只会呈现颜色；

所有单个组件的背景颜色会覆盖掉当前组件所占区域的背景色；

背景组件只能添加一个；

14.DIY模板修改组件配置

在DIY模板->编辑模板列表界面中，选择需要修改的组件，点击手机预览图中的组件（对应右侧呈现该组件的配置信息）；此时可修改该组件信息，保存成功，该DIY模板组件更新（更改后的组件在移动端首页呈现的信息会同步变更），如图所示：

说明：

预览图选中组件后，右侧会呈现该组件信息，同时定位该组件属于哪个组件分类；

15.DIY模板删除组件配置

在DIY模板->编辑模板列表界面中，选择需要删除的组件，光标在手机预览图中组件右下角点击【删除】；此时可删除该组件，保存成功，该DIY模板组件有删除（删除后的组件不会呈现在移动端首页）。

如图所示：

16.DIY模板组件排序配置

在DIY模板->编辑模板列表界面中，选择需要更改顺序的组件，光标在手机预览图中选中组件并上下拖动；此时可更改该组件的呈现顺序，保存成功，该DIY模板组件顺序有变更（更改顺序后的组件在移动端首页呈现顺序与预览图的呈现顺序一致）。

如图所示：