淘宝

-

高级模板开发流程

欢迎加入高级模板设计的行列！本指南为你提供每一设计步骤的操作指示，全程

指导你完成模板设计。设计流程包含以下步骤：

1. 下载、安装SDK

从淘宝店铺装修市场后台下载安装包，安装至本地，创建SDK web控制台

下载

1. 在淘宝网店铺装修市场以设计师身份进入设计师后台

2. 在“一步一步做模板”里选择Windows版本的SDK安装包下载。

提示：使用老的SDK的同学，重新启动一下SDK，就会有自动更新提示，如果启动了没有更新提

示，说明你的sdk实在太老了，直接通过上面的地址下载。SDK自动更新完之后务必关闭当前的

再重启即可。

安装

1. 双击下载后的SDK安装包文件，如下图所示：

2. 进入SDK欢迎界面，然后在许可证协议里选择“我接受”

>

3. 进入安装选项界面，选定安装的组件，点击“下一步”

4. 进入安装文件夹界面，选择意向的安装目录，点击“安装

5. 进入安装进度界面，”点击“关闭”，即完成SDK的安装。

6. 安装完成后将会在桌面生成“启动设计师SDK”的图标。双击图标，系统将

自动运行后台文件“启动设计师”并在浏览器中打开SDK后台。

提示：在使用SDK web控制台过程中，请勿关闭后台文件“启动设计师”窗口。

Mac版本

下载

1. 在淘宝网店铺装修市场以设计师身份进入设计师后台

2. 在“一步一步做模板”里选择Mac版本的SDK安装包下载。

3. 将此安装包解压到任何一个本地磁盘目录(不含桌面、中文和空格的目录)。

解压后的目录结构如下图所示：

提示：使用老的SDK的同学，重新启动一下SDK，就会有自动更新提示，如果启动了没有更新提

示，说明你的sdk实在太老了，直接通过上面的地址下载。SDK自动更新完之后务必关闭当前的

再重启即可。

启动

1. 在浏览器中手动输入http://localhost:8080/ 进入SDK web控制台首页

提示：SDK web控制台主要用于创建模板文件夹，调试、预览及上传模板，你的设计及编码开发

工作将在本地完成。

查看开发设计文档

出自淘宝网店铺开发者WIKI

跳转到： 导航, 搜索

为保证模板开发质量，请务必查看官方提供的四份开发设计文档，分别介绍SDK

环境、模板代码规范、页面体验设计指南以及模板审核标准。

• SDK开发环境指南

• 店铺模板用户体验设计指南

• 店铺模板代码规范指南

• 店铺模板审核规范

在你的开发过程中，可以随时通过SDK web控制台的开发文档、开发者论坛获得

帮助。

创建模板目录

1. 进入SDK web控制台首页，点击设计新模版，进入模板创建界面如下图所示：

2. 完整填写上图所示信息，然后点击下一步。其中：

• 目录名称：必须为英文，它将在本地SDK文件夹、htdocs子文件夹下对应地

生成相应的模板目录，该模板的所有页面、文件等都将存放于该目录下

• 模板名称：可根据你的需要自行编写，后续在发布、出售模板时，你可再次更

改模板名称

• 版本号：对于大规模版本变化，建议版本号为1.0、2.0„„；对于小规模版

本变化，建议版本号为1.1、1.2„„.

• 适用站点：目前，店铺分为淘宝内店（不分旺铺版本）、商城店铺、外部网店

三种类型，不同类型在模块调用时有不同规则，请慎甚重选择并在后续设计时遵

循相应规则。

3. 系统提示模板创建成功。此时，在本地SDK安装目录的htdocs目录下已生成

对应的模板文件夹（如，sample）

同时，在SDK web控制台“我的模板”下，也已创建相应的模板预览及发布环境。

点击模板名称可查看详情。

4. 在本地每个模板文件夹中，将默认创建两个文件夹以及7个页面文件。与该

模板相关的所有页面、模块及编码都将存放在此。目录结构如下图所示:

5. 请查阅《SDK开发环境指南》，了解详细的文件夹以及页面规则。

本地设计

设计PSD页面

使用Photoshop等图像处理工具，设计你自主风格的店铺页面效果图。

提示：为设计用户体验更佳的模板，请参阅《店铺用户体验设计指南》。

HTML、PHP编码

使用Dreamweaver等网页开发工具，将平面设计稿转化为网页。

提示：更多信息请参阅《代码规范指南》。

模板调试

模板调试应包括浏览器兼容性调试，以及数据调试。

SDK中提供一个开关项，在正常的浏览地址中跟上?debug便可以看到模拟的装修

效果。比如我们请求地址http://localhost:8080/template1/?debug,

呈现出来就是类似线上店铺装修的效果。

提示：更多信息请参阅《代码规范指南》。

当你的模板制作完毕，请返回SDK web控制台首页，进入我的模板。系统将显示

所有本地模板列表（如下图）：

点击预览，将显示模板效果。

上传

进入SDK web控制的模板详情页，点击发布，系统自动对当前的模板进行打包，

打包后会在htdocs文件夹对应的模板目录下生成zip文件。SDK会对即将发布

的模板进行校验，一旦找不到此zip文件或文件结构已损坏，将提供出错界面反

馈，如下图所示：

系统将自动跳转到淘宝店铺装修市场设计师后台接受zip包的上传，如下图所

示：

点击上传进入模板信息填写、等待申请上线。

提示：上传的模板需兼容各主流浏览器常用的版本

等待审核

完成模板上传后，需要等待淘宝小二审核模板的代码规范性、设计是否侵权等。

可在装修市场后台查看审核状态。

提示：更多信息请参阅《模板审核标准》。

在装修市场设计师后台，进入某个模板详情，版本信息中将显示当前模板所有的

版本，可对审核已通过的版本进行上架操作。

恭喜你

你已掌握此模板设计的全部流程。有关此处所涉及主题的详细信息，请参阅其他

开发文档

QQ：46527554

1月6号高级模板开发&装修系统功能预告

本帖被 在天 执行取消置顶操作(2011-01-07)

各位设计师&淘宝卖家：

我们将在1月6号提供2011年一批新功能。现将旺铺装修系统、模板开发的新功能及变动

情况提前告知大家。



SDK控制台新增模块管理功能

为了简化新建模块的步骤，让设计师无需再手动创建目录，配置Xml和相关的Php文件，我们

提供了可视化的模块管理功能。进入SDk控制台的模板详情页面，即可查看该模板引用的所有模

块，并可完成创建、编辑、删除模块的工作，相应的xml、php文件将自动创建。



完善SDK异常信息

对SDK控制台使用及模板上传过程中的异常情况，我们进行了优化。同时提供了更完善的错误

提示信息，使设计师用户能精准定位问题原因，快速解决问题。

比如，SDK模板上传时，系统会进行错误校验，并提供了精确的错误明细，如下图所示：



提供SDK开发指南

我们为设计师提供了详细的《高级模板制作教程》，涵盖SDK开发环境基础介绍，如SDK如何

下载，安装，控制台如何使用；也括了制作模板的详细过程，如介绍了模板的标准结构，如何设

计模块，设计页面等等；提供了模板模板如何调试的说明以及模板的如何发布上传。

具体的教程目录章节如下所示：

我们将在店铺开发者论坛及wiki上提供此文档。

扶植版旺铺模板开放

1月6号开始，扶植版模板仅针对扶植版卖家开放，标准版、拓展版、旗舰版用户将不能购买扶

植版模板。



旧版旺铺装修系统停止使用

1月6号起，旧版旺铺装修系统将停止使用，已升级至新版旺铺的用户将不再提供“返回旧版”的

入口。所有店铺已有装修数据不会受任何影响。

-

淘宝卖家版下载安装