打开PS软件（adobe photoshop）

1.点击”文件”—选择“打开”

找到保存好的整张图片选中，点击打开

选择“切片工具”快捷键c

从左上角按住左键不放，拖动鼠标到右下角，选中如图所示区域。

鼠标移动到图片位置点击右键选择“划分切片”

选择“水平划分”和“垂直划分”数值3，然后点击确认。

点击文件，选择“存储为Web和设备所用格式”

注意右上角的格式与数值，确认无误后点击“存储”

选择一个文件夹保存，注意格式选择“HTML和图像”，然后点击保存。

下面开始教大家如何更换图片的源代码：

接下来是最重要的步骤，也是最容易操作失误的地方。

点击之前用PS保存的文件，双击点开关联营销

如图操作

然后在桌面点击右键新建一个文本文档把复制的源代码，粘贴在文档里面，保存好。

下面的操作是在卖家中心—图片管家里面完成

打开图片关键创建新相册，上传PS切片后的图片

点击保存的文件找到images文件，把图片上传到阿里图片管家里面，怎么上传图片这里就不说了，下一步点击查看图片—复制地址—复制提示框内的URL地址。【如图操作】

上传完上图文件内的图片后，找到相册点击图片开始复制URL地址了【如下图】

【注意下面的操作】

打开保存的源代码文档，把图片中红框内的代码更改为URL地址

PS切片了多少图片就要更改多少图片的URL地址

全部更改完成后复制源代码，打开销售中的产品，在详情描述框最下面点击源代码，把文档内更改好的源代码粘贴到最前面，注意空格。

最后按照对应产品点击图片，添加产品链接进去就完成了

总结一下步骤：

第一步制作好关联营销的整张图片

第二步使用PS切片工具划分成单张图片，保存为HTML和图像

第三步上传保存的单张图片到阿里图片管家

第四步打开保存的HTML关联营销获取图片源代码

第五步复制图片管家单张图片的地址在源代码里面更改

第六步复制更改好的源代码添加到详情页，最后按照图片对应产品添加产品链接即可。

最后如果还有疑问对PS切片这块推荐看这个视频教程，虽然讲的是淘宝天猫店铺做关联的但阿里巴巴装修也类似，可以算是通用教程啦。

通用详情页关联制作方法PS切片DW加链接，大多数店铺都这样做的

http://www.mgzxzs.com/tmtbzxjc/366.html

如果想要了解更多关于阿里巴巴店铺装修方面知识可以关注疯狂的美工网站哦。