淘宝模板代码制作（商品详情页面html代码）

文/做设计的大叔 2021年08月28日 14:26:42 • 淘宝经验

有朋友说他不会装修店铺，也不懂什么代码。简单的海报可以勉强能做，但想在海报上设置2个或以上的热点或者自己设计的产品展示怎么搞热点就头大不知道怎么弄了，这里大叔教你一个简单的办法，就是利用某些在线转代码功能来实现全屏或者多热点效果。

说到代码，没接触过的朋友应该是一阵无力感，脑中瞬间有一串串看不懂的数字符号快速闪过，黑客帝国啊我去！比学英语还恐怖。

下面我们就学一种简单的代码装修，拿多个热点的全屏海报来说吧。记住一点，那就一个字：复制加黏贴。

打开一个可以在线转代码的网站：90设计网、千图网…………百度一下，很多。比如码工助手网站，打开并找到通用全屏热点生成工具或者经典全屏热点海报。这两个都可以达到我们的目的。

准备工作就是把你做好的1920像素宽的海报图上传到你自己的千牛店铺的图片空间里，这里建议你在图片空间新建一个文件夹，专门来储存装修的图。比如建立一个名字为店铺装修的文件夹，再建立一个名字为2018冬季的子文件夹，这样便于以后管理（上传宝贝也最好建立相应名字的文件夹，秋款，冬款等）。

上传好海报后把鼠标放海报图上，下面就会显示出4个选项，分别是复制图片、复制链接、复制代码、删除图片。点击第二项复制链接，这样就复制好了我们海报的链接。

然后回到全屏热点网站页面，把刚才复制好的图片链接复制到名字为图片地址这一栏后面空白处，然后点击载入图片选项就可以看到我们的海报图显示到最上面了。如下图

图中绿色矩形框就是热点了，把绿色框放到需要加的位置，如果你想让海报上出现多个热点，可点击增加热点这一按钮来添加多个热点。热点位置可随意改变。然后只要去你网店复制你宝贝或者活动页面的链接到这边对应的热点后面即可。

（友情提示，宝贝需要先上架才会有链接给你复制，不然是没办法的，放在仓库不发布也可以）

下面可以选择对应店铺：天猫选天猫，淘宝选淘宝。然后预览一下，预览就是让你试验一下是否全屏，热点是否好用且正确无误。确定无误后点击获取代码，然后直接选择最下面的复制代码。

下一步是打开千牛，选择装修店铺页面，选择电脑页面装修。然后从右边鼠标点住自定义模块别松手，拖到下图红圈位置，出现黄色提示可放就可以松手了。拖到其它任何位置也可以，反正后面可以调顺序。只要能放下自定义模块的就行。

双击右边放置好的自定义模块进入编辑模式。最上面有个显示、不显示选项，这此模块的标题，勾选不显示。然后看下图，有两处可以进入代码编辑状态的工具，点击进入代码编辑状态。把我们刚才生成的海报代码黏贴到空白处点击确定即可。

这样就可以看到我们的海报完美地展现在你的店铺里了。可以点击右上角的预览选项来预览装修好的效果（友情提示：在千牛软件里预览的图片会变得大一些模糊一些，预览效果不是最终清晰效果，请点击发布后稍等片刻再去浏览器网页上预览自己店铺最终效果）。

这样一个多热点的全屏海报就搞定了，简单吧。跟代码其实没多大关系！还有好多其他的网站也都可以生产代码的，比如千图也可以。

网站很多，都可以达到你的理想效果。办法教给你，学不会那就呵呵哒了。我想我讲的够详细了，真不会那就多看几遍吧。（声明：只针对无基础的初学者来讲，不要扯什么DW啊，什么不要小看美工之类的话。我……不……听）