2、提前准备好一张产品大图(你所需要关联产品整体布局图)
一、学会简单切图
1、打开ps,把要做关联的产品图片先排列整齐做成一张大图,找到切片工具
把图片分成7份,我这边顶部也分了一部分。(当然你关联的产品更多可以多分几份,根据实际情况来定)
2、切片完成后,保存图片。点开“文件”选择“储存为Web所用格式”
文件格式选择“HTML和图像”然后点保存即可
3、完成储存后,打开刚刚我们保存好的“HTML格式”文件。
4、点击后是一个网页文件,打开后会跳转到网页浏览器中。点击浏览器工具栏的查看”工具”选择“查看网页源代码”这张图的网页代码就会出来。如下图
二、替换图片,转化url
1、选择刚刚保存的图片文件夹打开,把保存好的7张图片文件上传到旺铺相册。具体操作:点击我的阿里---新建相册名---上传图片
2、上传好图片之后,每张图片都会有它的图片地址,按照图片顺序选择复制URL地址:。具体操
作,点击管理相册,按照顺序点击图片—复制对应的url
3、由于复制的地址是要替换刚才网页源代码中的图片地址,把以建议一张替换好后再复制其它的。
图片中画红框的是原来图片的地址,按照刚刚的方法把上传相册后的图片地址替换掉就生成了关联营销代码。这段代码从
开始到结束(body不要复制喔)。三、详情页面加入源代码,做产品关联超链
1、代码生成就可以用起来啦,我做的是详情描述的关联营销,把这段代码复制好,在详情描述中选择“源代码”粘贴就可以啦!
2、再回到“编辑”给产品图片添加相应的产品链接就行啦!
有了这个小方法,就算是不懂代码的小菜鸟,也能轻松做好简单的关联营销模块并熟练的运用起来。你学会了吗?
THE END