国际站店铺装修要点
在做国际站之前，我从未做过店铺装修，所以单纯地以为店铺装修只要把做好的图切一下传传上去就完了，没想到里面还有很多门道。这里就来讲一下。
因为目前我只用过官方通用模板（其他模板都要花钱，除非你刚开了金品诚企，可以免费使用一年的PC专属模板），所以这里只讲官方通用模板下，需要注意的使用方法。
一、店招
在国际站装修后台看到的店招尺寸是1200X280px，但如果你按照这个尺寸的显示效果来做店招，上传之后一定会一脸懵逼，怎么回事，怎么和你做的图片尺寸不一样，上下高度少了那么多。
后台店招建议尺寸
按照1200X280px做好的店招
传上去后的显示效果
你会发现，你做图的时候明明在LOGO的上下留有50px的留白，传到后台后，却没有空隙了。
为何会这样呢？其实平台上显示出来的店招尺寸实际是1200X190px，还有90px去哪了呢？还有90px是导航条的高度，店招的上方和下方分别有两条导航条，上方高度是46px，下方高度是44px。
导航条高度
这90px的高度被系统额外算在店招的高度上，如果在设计的时候，没有把这个高度算上的话，会发现发布在首页的店招上下被裁掉了好多尺寸。所以在设计店招时，需要新建一个1200X190px文件，做好效果后，再在上方加上46px高度，在下方加上44px高度，做成1200X280px的尺寸后上传到后台。
先做一个1200*190px的店招
再上面加46px下面加44px
这样传到后台后，显示的效果才能和你先前设计好的一样。
发布后的显示效果
然后，你会发现下面一根导航条太短了，不够美观，最好做成通栏效果，这要怎么实现呢？这里需要用到页面背景。页面背景设置需要点击页面背景-页面背景色，背景图片点显示。系统建议页面背景的宽度为2000px，所以需要把图片拓宽到2000px，不然图片会被自动拉大，内容显示不完整。
页面背景建议宽度2000px
因为店招高度是280px，所以新建一个2000X280px的图片，在最下面加一个44px高度的导航条。
2000X280px的页面背景
然后注意把填充方式改不平铺，对齐方式改居中，把最终显示效果如下：
最终显示效果
如果你发现导航条的颜色和自己的风格不符，可以更改导航条的颜色。在页面背景-页面主题色里，在#后面粘贴你要用的色号即可。
更改导航栏的颜色
如果你想要把整个店招都做成通栏效果，要怎么设置呢，比如你想做成这种效果：
通栏效果
要怎么实现呢？店招的尺寸宽度是1200px，但上面的尺寸明显是超过了这个宽度。
通栏店招的尺寸超过系统宽度
首先，我们需要把中间1200px宽度的部分截下来传到后台店招里。
截取中间1200px宽度部分
然后把整个完整的店招拓宽到2000px。
拓展成2000px宽
之后在下面加上44px高度的导航条
加上44px导航条
之后上传到后台页面背景中，设置好不平铺，居中即可。
二、全屏轮播海报
全屏轮播海报（通栏banner）的宽度是1920px，高度有两种一种是550px，还有一种650px。
全屏海报尺寸
但你若是直接按照1920px的宽度设计好再上传，又会发现问题。怎么和我设计的尺寸效果又不一样了呢？左右两边被截掉了好多啊。
你做了一张1920X650px的海报
上传后两边被截掉好多（19.5寸电脑显示效果）
如果你换了一个更小的显示器，你会发现，你的图片被截掉更多了。
13寸电脑显示效果
如果有条件的话，你找一个大一点的显示器（25寸以上的），你又发现，你的图片能够完整显示了。
在27寸电脑上的显示效果
看到这里，也许你已经能够明白了，后台系统是默认你的显示器尺寸是比较大的，而当我们用不同的显示器来看我们的店铺时，我们的显示效果是不一样的，显示器越小，我们图片展示的完整性越低。那要怎么来解决这个问题呢？如果我图片里的重点信息被系统截掉了，买家不是都看不见了吗？而且这样也会让展示的美观性降低。
我在想，如果想要让大部分电脑都能达到好的显示效果，那就需要折中一下。像我们办公用的电脑一般用的是19.5寸的显示屏，在国际站店铺首页显示的通栏尺寸大慨是1585px。所以我在做全屏海报时，都是先做好一张宽度为1585px的效果图
先做1585X650px的海报
再在两边拓宽到1920px
两边拓宽到1920
在19.5寸的电脑上显示出来的效果就是比较好的。
拓宽后在19.5寸电脑上显示效果
拓宽用的背景色用的是页面背景色，我通常用96%明度的白色。
页面背景色的设置在页面背景-页面背景色，在#后面填入色号即可。
页面背景色
三、自定义模块
基本上，除了店招和全屏海报，剩余的部分我都放在自定义模块里，自定义模板的宽度是1200px，里面可以添加很多图片（数量不计），每张图片的高度要小于1000px。
自定义尺寸：宽度1200px，高度小于1000px
所以在上传之间，需要对图片进行切图。在PS里拉参考线，选择切片工具，点击基于参考线的切片。然后同时按住Ctrl+Shift+Alt+S键，存储。需要注意的是，存储之前，要在图片显示区域，按住鼠标左键不放，选中全部的图片，选择图片格式为JPEG（否则部分图片格式可能不对）。
这一部分的图片一般需要加非常多的链接，那这些链接怎么加呢？很多人一般会把每一个需要加链接的地方进行切片。
对每一个产品进行切片
切完之后，在后台一个个上传图片，分别对每一个产品加链接。
在后台对产品加链接
因为我不喜欢把图片切得碎碎的，所以我都是在Dreamwear里用画热点的方式加链接的。这里介绍一下Dreamwear的使用方法。
首先需要在PS里把图片进行切片，这时候不用切得很碎，只要横向切一下就好了。
横向简单切一下图片
切好后，同时按住Ctrl+Shift+Alt+S键，存储，注意这个时候要把格式改为HTML和图像。
把格式改为HTML和图像
存好以后需要把每一个切片先传到网上。可以放在国际站的图片银行里（在产品管理-管理图片银行）。
进入国际站图片银行
也可以放在自己的淘宝图片空间里，我习惯用后者。网址是：https://sucai.wangpu.taobao.com/
淘宝图片空间
把所有图片上传好之后，打开存储好的html文件，打开时右键，选择打开方式为Dreamwear。
用Dreamwear打开html文件
打开之后，在图片空间里一个一个复制图片地址（点击第二个小图标）。
点击第二个图标复制图片地址
复制好一个链接，就粘贴到Dreamwear对应切图的Src后面的格子里，粘贴之前，需要先在上面点一下图片，然后删掉Src格子里原先的内容。Src位置在下面的属性信息里。
把图片地址粘贴到Src后面
粘贴好之后还需要填写一下地图后面的名称，比如map1、map2，不然容易乱码。
给地图命名
完成之后，对每张切片图做同样的操作。
加完所有的图片地址和地图后，就可以开始画热点了。画热点就是在每个需要加链接的图片上画矩形框，点一下上面的小矩形就可以画了。
点击矩形框画热点
画好后的效果是这样的：
画好热点的效果
每加一个矩形框后，就需要把复制好的产品链接粘贴进去，注意要把前面的#删掉。
加入产品链接
粘贴好链接后，一定不要忘了把目标选成_blank。_blank的意思是超链接会在新的标签页中打开，如果没有选，就会在当前页面中打开。
把目标选成_blank
把所有需要加的链接都用热点的方式加完以后，点击代码格式，Ctrl+A选中所有代码，复制。
选中所有的代码
在后台自定义模块里点击左上角的源码格式，在里面把代码粘贴进去即可。
点击后台的源码格式，粘贴代码
四、视频模块
视频模块的尺寸是1200X450px
视频模块尺寸
其中视频展示部分的尺寸是800X450px
视频展示部分尺寸
可以选择居左或居右，余下的400px宽度可以用作文字描述，添加视频模块前，首先要把视频传到视频银行，在产品管理-管理视频银行
找到管理视频银行
首页上可以展示的视频尺寸必须是16:9，时长小于10分钟，大小小于500M，清晰度大于480P。上传成功之后，回到装修后台把视频传上去，做一个800X450的展示封面，再添加背景就可以了。
五、多语言的链接在哪里加
多语言链接要怎么加呢？在旺铺后台点击公司，把多语言快链拖到右边
加入多语言快链
然后在右下方找到预览，在预览页面里，把鼠标放在每一个多语言上面，右键-复制链接地址即可。
右键复制链接地址
六、客服旺旺要怎么加
以上内容，几乎把大部分问题都解决了，但发现，不知道怎么在自己设计的客服模块里链接客服旺旺，可以让别人点击旺旺头像就能同对应的旺旺客服进行聊天。国际站与淘宝不同的是，淘宝可以很方便地在首页上找到旺旺链接地址，可是国际站却找不到旺旺链接地址。
所以在国际站里想加旺旺链接必须使用国际站的客服代码。那么国际站的客服代码哪里可以找呢？在国际站内部是找不到的，需要借助第三方平台。有一个网站叫1秒钟美工助手，专门为国际站制作各种后台代码。网址是：http://1miaozhong.com/。
问题是这个网站是要收费的，每年要支付298元。
美工助手VIP要298元/年
如果你不想付费的话，我这里已经将里面的代码研究透了，只要更改里面中文部分的内容，就可以完成加客服旺旺的部分，这个是永久免费的。这个代码是我自己简化版的，具体我放在这里：
<div class="div_bannerdesign1 sc-hd-m-droplist" style="height: （图片高度）px; position: relative; width: 1200px;" data-title="代码生成来源： 一秒钟美工助手http://www.1miaozhong.com/">
<div class="bannerdesign_o sc-hd-m-menu next-slick-dots tanchu9768" style="height: 80px; right: auto; width: 150px; border: none; left: （旺旺离最左端的宽度）px; line-height: normal; padding: 0px; top: （旺旺离最上面的高度）px; background: none; z-index: 1;">
<div class="www_bannerdesign_cn" style="width: 100%; overflow: hidden; position: relative; margin-top: 0px; margin: 0px; padding: 0px; float: none; left: 0px; z-index: 1; height: 100%;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" title="Hi, how can I help you?" href="//amos.alicdn.com/msg.aw?v=2&uid=（账号1）&site=enaliint&s=24&charset=UTF-8" target="_blank" rel="noopener" data-uid="（账号1）"><img style="border: none; vertical-align: middle; margin-right: 5px;" src="//amos.alicdn.com/online.aw?v=2&uid=（账号1）&site=enaliint&s=22&charset=UTF-8" alt="Hi, how can I help you?" /><span style="font-weight: bold;">（客服名1）</span></a></div>
</div>
<div class="jd_beij"><img style="margin-left: 0px; position: relative;" src="（图片地址）" width="1200" height="（图片高度）" /></div>
</div>
</div>
</div>
</div>
需要注意的是，这里我用的是宽度为1200px的图片，使用的时候，先把这张图上传到国际站图片银行或淘宝图片空间里，在上传之前，需要在要加旺旺的部分空出来。比如，你想呈现的一张客服图片是这样的。
想呈现的客服效果
要把旺旺的头像后后面的文字删掉后上传到网上
需要把旺旺头像和后面的文字删掉再上传
之后，在这串代码里填入图片高度，注意填写完后，把括号去掉，量出旺旺离图片最左侧和最上端的高度，量的时候，用PS画两个矩形，在PS最上面找到W和H后面的数据，W就是矩形的宽度，H就是矩形的高度。
用矩形量旺旺距最左端和最上端的距离
量出后，填入代码中，记得把括号去掉。接着需要填旺旺账号，旺旺账号在账户中心里
点击账户中心
如果是主账号，只要复制账号后面的账号名即可
复制后面的账户名
如果你还有一个子账号，要先复制一段代码，我放在下面：
<div class="bannerdesign_o sc-hd-m-menu next-slick-dots tanchu9768" style="height: 80px; right: auto; width: 150px; border: none; left: （旺旺离最左端的宽度）px; line-height: normal; padding: 0px; top: （旺旺离最上面的高度）px; background: none; z-index: 1;">
<div class="www_bannerdesign_cn" style="width: 100%; overflow: hidden; position: relative; margin-top: 0px; margin: 0px; padding: 0px; float: none; left: 0px; z-index: 1; height: 100%;"><a style="display: inline-block; font-weight: bold; text-align: center; text-decoration: none;" title="Hi, how can I help you?" href="//amos.alicdn.com/msg.aw?v=2&uid=（账号1）&site=enaliint&s=24&charset=UTF-8" target="_blank" rel="noopener" data-uid="（账号1）"><img style="border: none; vertical-align: middle; margin-right: 5px;" src="//amos.alicdn.com/online.aw?v=2&uid=（账号1）&site=enaliint&s=22&charset=UTF-8" alt="Hi, how can I help you?" /><span style="font-weight: bold;">（客服名1）</span></a></div>
</div>
把这一段代码复制好后粘贴到原有代码的uid=（账号1）&site=enaliint&s=22&charset=UTF-8" alt="Hi, how can I help you?" /><span style="font-weight: bold;">（客服名1）</span></a></div>后面，如果有多个客服账号，每多一个账号需要把这段代码多复制粘贴一遍。
粘贴好后，哪里去找子账号的账号名呢，点击管理子账号
点击管理子账号
点击查看详情
点击查看详情
就可以找到子账号的账号名和客户名
找到子账号的账号名和用户名
把这些填入代码中。代码中的客服名指的是旺旺头像后面跟的文字，我这里填的是“Chat Now”，最后需要复制图片空间里的图片地址，填入相应的代码中，都要把括号去掉。
完成代码后，复制所有的代码，在旺铺后台加一个自定义模块，点击源码格式，把代码粘贴在里面
在自定义的源码格式里粘贴所有代码
需要注意的是，粘贴完后，只需要点确定即可，不要重复点这个源码标志，不然效果可能会出不来。
七、其他所有的动态代码
在1秒钟美工助手这个网页里，除了客服代码外，还有各种店铺动效代码，目前一共有36种动效代码，而我只研究完6种，以后，我每研究完一种，都会把代码放在我的另一篇文章里。文章地址在：https://www.jianshu.com/p/74d00954cb65
网友评论