一、模板制作

1.建立模板文件夹目录

建立一个新模板，需要手工建立一个新文件夹，可以任意命名，模板里必须包含info.xml（模板信息配置文件）、 preview.jpg（模板缩略图）、theme.xml（模板信息记录文件，无需修改）。

完成之后系统将会自动判断此文件夹为新模板目录，在后台的模板列表中可看到此模板的名称以及模板缩略图。再按需要建立images、block、border等文件夹。

2.静态页面嵌入shopex系统

这一步和通常的设计稿->页面的过程相同，需要制作者具备基本的html、css等知识，这时的页面代码规整，会给之后的制作带来很大的方便。

制作静态页面时需要划分好布局，做好边框的样式。

这个时候所做的页面可以是低保真的，即仅划分页面的布局，版块的内容可以用均可使用”widget（挂件）“代替，待页面制作完成后，通过后台板块功能嵌入功能后再写入样式。

使用HTML布局方式，将模板分为以下几个部分。每个部分内的元素无需细化，其中含有功能性以及广告、图片、文字等元素，均可使用”widget（挂件）“代替。

注意，头部head内必须有<{header}>标签，尾部必须有<{footer}>标签，用来输出程序附带的资源，否则内页的部分功能会出现错误。

3.添加挂件预览效果，并完善样式修改

通过板块功能调用出的内容，其表现形式和风格都是由系统内置CSS制定。而通常我们自己制作的模板往往与系统内置风格有着多多少少的区别。同时也是为了使模板更加独特而需要做的事情。

这一步的过程完全通过css的修改来完成。系统默认调用的是内置css，它的路径是statics文件夹下的framework.css、shop.css。

但是如果我们通过常规方法直接修改这2个系统内置CSS文件，很容易在升级时一并被修改，并无法将模板导出。

这里推荐使用“覆盖法”来更改css的属性，也就是将需要修改的css属性从系统内置CSS文件中，拿到模板目录文件夹内的css文件中，修改过后在页面显示时系统将优先显示此css属性。用此方法达到修改目的。

推荐使用friefox浏览器，和其中的firebug插件，可以快速查询到指定位置的CSS名称和关联情况。

4.根据情况制作模板的边框和挂件

选取可复用部分作为边框，这一步的工作可以放在模板布局时提前做好，因边框也属于外部调用的形式，shopex模板系统将每一个边框文件作为单独的文件以便重复调用。

如果有部分ShopEx本身没有的挂件，可以自行制作新挂件或在原有挂件基础上修改。注意新挂件或者修改后的挂件需改名，勿覆盖系统挂件，以免今后系统升级造成文件丢失。

5.制作内页

除了首页外，其他页面都可以用默认框架default.html。

默认框架输出业务区，承担所有业务流程的功能，也就是说只要一个默认框架 default.html就能表示所有功能内页，进入不同的功能内页时，业务区输出不同的预置内容。default.html文件放置在模板目录下，与index.html层级相同。

如果某个页面需要与其他页面不同，这个时候就可以手工建立一个新的模板框架，这些框架是由系统已经预置好的，只需要选择想要添加的页面类型就可以了。

自我感觉，shopex的模板是非常容易上手的。我曾经做过ecshop模板的制作和修改，真的很麻烦，而像shopex这样程序和模板分离，其实理解了shopex模板机制，只要你会做网站美工设计，会Div+Css，一样可以做出一套属于自己的shopex模板。下面是一些心得体会（非本人的）。

shopex是程序和模板分离的，这样就大大方便了大家可以做出自己漂亮的外观网站，虽然很多地方分离得不够，比如一些核心的业务流程区基本大家就很难修改了，但是大部分还是满足网站基本要求的。

首先，说说模板下的theme.xml，官方是这么说的，theme.xml是整个模板中最重要的部分，所有模板的配置信息都是存在这个xml中的，包括板块的位置、配置信息，边框的信息等等。第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化，之后用户便可以在可视化界面中进行板块的增删改和对原有的板块进行配置。配置信息保存在数据库中，用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默认”来应用新的theme.xml。