一、登录账号以及插件安装

1. 首先我们来到雨燕工具箱的首页，点击右上角 登录，扫码登录账号，首次登录会为您创建账号。

2. 点击左侧的店铺装修，然后点击右边的新建模板，然后在弹出的弹窗中填入一个您能记住的名称就好。

3. 创建完成后，点击我们刚刚创建的模板，右侧的 修改按钮，进入到模板编辑页面。首次进入编辑页面，如果未安装插件的话，顶部会提示未安装，根据指引，安装插件即可。

4. 安装完插件后，刷新页面，如果插件安装完，刚才的插件提示就会消失，这时候，需要额外登录店铺账号，这样插件才能从店铺中获取到链接和图片银行中的图片。

如果未登录，顶部会提示登录，点击链接，登录店铺账号。

5. 登录完店铺账号之后，刷新页面，顶部不再有提示，一切就绪，我们就可以进行接下来的装修工作了🎉。

二. OPENDAY装修

我们以下面的客户为例，OPENDAY需要在顶部添加下列内容：包括轮播图、腰封、视频、主推品这几个部分。

第一步，我们先将素材传到图片银行中，图片银行地址：

https://photobank.alibaba.com/

第二步，添加顶部轮播图，点击新增楼层，选择轮播，然后中间会多出一个轮播区块，点击右侧的添加轮播图按钮，会多出一个轮播图。

然后点击 点击上传图片，打开图片选择器，在图片银行中选择我们上传的轮播图片，然后确定即可。

这样，我们的轮播部分就做好啦，如果有需要，也可以点击右侧的添加轮播图添加更多轮播

第三步，添加腰封，腰封比较简单，其实就是一张图，点击 新增楼层，添加图片容器，然后在右侧点击 点击上传图片，选择我们在图片银行中上传的腰封素材。

第四步，添加视频，首先点击 新增楼层，然后选择视频，然后在右侧点击 点击上传图片，选择视频部分的背景图

2. 选择完背景图后，效果如下，接下来调整视频组件的位置，如果视频大小和设计图中不一样，可以选择视频尺寸中的 自定义 调整宽和高。

3.  修改视频id，点击右侧 视频ID下面的 管理视频按钮，进入到视频银行，找到之前上传的视频素材，拷贝下面的id，如果没有上传的话，可以点上方的上传，先上传视频素材。

4. 把刚才的视频id，填到模板编辑页面右侧的 视频ID 框中，即可看到左侧的视频正确 加载。

5. 给视频右侧添加热区，参考下图步骤即可

第五步，添加热卖产品，热卖产品实际上就是图片+热区，那我们使用图片容器楼层

加完楼层之后，点击添加热区

经过以上，我们的装修基本就完成了。

三、发布到店铺

我们接下来来到店铺装修后台： https://siteadmin.alibaba.com/admin.htm?spm=a2700.siteadmin_ai_decorate.0.0.4a223055Yw0eTc#/

接下来找到我们线上的版本，然后点击右侧的更多，然后点击复制版本，可以命名成 比如 openday0428之类的意义明确的名称。添加完成后，点击编辑，进入到页面的编辑页。

按照图示，点击一键装修，然后选择模板，勾选保留所有现有楼层，最后点击开始装修。

最后，等待它自动装修完成，然后预览无误后，点击发布，就大功告成啦🎉🎉🎉！