请输入搜索关键字!

手把手教你做一套大商创店铺模板(1.9版)

ecshop模板堂(ecmoban.com) | 2016-12-15 12:14 | 1505

大商创1.9版本之后新增了店铺可视化编辑功能,在1.92版本之后支持了店铺模板下载功能,这就意味着有更多有前端技术的朋友可以自己做一套自定义模板,而且可以交流和传播。那么如何做一套店铺模板呢?在这里我给大家演示一下制作大商创店铺模板的整个过程。


1,准备工作

首先是准备工作,先开启对应的商家权限,这样在商家后台才会出现可视化编辑功能。

具体可以参考这篇教程 http://help.ecmoban.com/article-5245.html


2,进入商家后台可视化编辑

进入商家后台,点击“店铺设置-店铺可视化编辑”

a1.jpg



3,正式可视化编辑


默认是一套女装店铺,你可以通过后台通用的可视化编辑功能,改成自己想要的样式,其实还是比较简单的。


3-1、首先是头部顶部广告


点右上角编辑可以进入编辑状态,添加商品和链接

a1.jpg




左侧工具栏这里更改背景图片以或者背景颜色


3-2、导航栏


a2.jpg

菜单栏可以鼠标移上去直接编辑,菜单的内容和链接,以及颜色

a2b.jpg




3-3、轮播

轮播直接编辑即可修改

a3c.jpg




如果没有也可以从左侧工具栏拖过来,不过这里要注意,如果已经有轮播模块,拖过来之后会清空所有图片数据。(重新选择店铺模板可以还原)



3-4 固定广告模块


默认只是四总样式,可以从左侧模块拖拽进去即可


a1.jpg


四个广告有不同的样式,通栏,或者一栏多个图等,可以随意插入位置,并支持上移下移调整。



不同样式的广告还能分别设置不同的内容

a3.jpg



3-5 商品模块


同样是左侧模块区域,商品楼层拖拽


a1.jpg


鼠标移上去之后可以选择调用商品,以及布局展示数量


左侧可以拖拽更多商品楼层


a2.jpg

 


3-6 自定义模块


a1.jpg


自定义模块可以手写html代码,做出很炫的前端效果,并且店铺模板核心其实就在于html自定义区的代码



可进入html直接编辑


当然,因为编辑器的原因会修改空格一下之后出现 “ ”代码,会对纯代码写法造成影响,你也可以直接打开文件修改(前端高手推荐)。



修改之后保存即可,后面会详细说明一下店铺模板的目录结构与文件作用。



4,店铺模板的备份,导出,导入,和选择


4-1,店铺模板的备份


编辑完成可以点击右上角的确认发布,“选择模板按”钮则是进入模板管理,这里我们点击“选择模板”


a1.jpg


默认进入的页面分为两部分,上边区域是当前使用模板的介绍,下边区域是可以选择的模板(平台方提供)


a1.jpg



如果我们觉得编辑的模板很满意,可以点击上边区域的“备份该模板”


a1.jpg


可以编辑封面,大图,描述等等,之后确定即可。




之后可以在下边区域,切换到本地,就能看到你备份的模板了


a1.jpg



至此辛苦编辑的店铺模板终于保存好了,注意,这里的备份是新增,但是不原则,也就是你如果继续修改之后备份则是另外一套模板,和原始模板不同。



4-2,店铺模板的导出


在本店店铺模板的右侧,有导出按钮。

a0.jpg


之后勾选需要导出的模板(可批量),之后回到原来导出的地方,点击确定

a1b.jpg


导出即可


a0.jpg



4-3,店铺的导入


将导出的店铺文件

 a0.jpg


上传至 dataseller_templatesseller_tem


并且建议修改一下后面这个序列号“2”,改成复杂的数字,比如

a1.jpg

修改成复杂的序号为了避免重复确保独立性,因为店铺模板的序号机制是新模板自动+1,如果重复将来导入可能会造成覆盖。





4-4,店铺模板的选择


a1.jpg


上传之后就能看到模板预览图了,选择即可。



5,店铺模板文件及文件夹说明


a1.png

这个目录是店铺模板的存放目录


a2.png

目录下面有类似这样的文件夹


seller_tem是“可使用模板”区域内的店铺。(也就是平台提供给入驻商选择的模板)


seller_tem_60是“本店铺模板”区域内的模板。(也就是入驻商自己备份的模板),这里的id 代表不同的入驻商id编号


这两个文件进入之后即可看到所有店铺模板,默认的是store_tpl_1,刚才导入的是store_tpl_65453


a3.png


当用户选择使用一款模板之后,seller_tem_60文件夹内(入驻商的本店铺模板文件夹)便会自动拷贝一份模板文件,因此这两个文件夹的目录结构,是一致的。


a1.jpg

而backup_tpl_65454,则是备份模板之后产生的模板文件夹,这里的序号是顺着已选模板自动+1,



店铺模板文件


a1.jpg

目录比较简单,有一个地方要说明一下

pc_html.php是可视化编辑之后的文件,也就是页面实际代码

pc_page.php是可视化过程中的文件,也就是进入可视化编辑之后,操作员在可视化视窗里面看到的代码



4,小技巧


4-1,因为自定义html模块在导出之后,没有办法把图片一起导出,建议会代码基础的同学可以把图片存在模板images文件夹里面,然后通过html的相对定位的代码调取


a1.png




上海市普陀区中山北路3553号伸大厦3层

上海工商 可信网站 诚信网站 实名验证网站 实名网站 财付通

沪公网安备 31010702001054号