×

第一步 准备底图与工具载入

首先，做好一张详情页图片（建议宽度为 950px）。将其上传至阿里图片银行，复制原图链接，粘贴到上方工具的输入框中，并点击“载入并重置画布”。

🖼️ 点击放大查看图示：图片上传与链接载入

第二步 框选热区并关联产品链接

点击“增加空间融合热区”，画面中会出现一个半透明的橘色框。用鼠标拖动并调整大小，让它完全盖住你需要加链接的区域（如某款产品图或按钮）。接着前往阿里后台的“管理产品 / 出售中的宝贝”列表，复制对应产品的链接，粘贴进热区上的输入框中。

🖼️ 点击放大查看图示：框选产品热区与填入链接

               第三步 生成阿里国际代码与基础插入方法

设置好所有热区后，点击“生成代码”并复制输出的源码。回到阿里产品编辑页，切换到“源代码”模式。将光标放在代码的最前面（第一个 <div> 标签之前），敲击回车换行，在空白处右击粘贴代码。再次点击切换回普通视图，图片就可以直接点击跳转了，点击发布即可生效。
（💡 小提示：如果后期想删除这张图片，在普通视图下点击一下该图片，直接按键盘上的 Delete 键即可。）

🖼️ 点击放大查看图示：源码模式置顶插入

进阶必学 制作“管理模板”全店任意调用

对于看不懂代码、又需要在多个产品详情页的特定中间位置插入该模块的同学，强烈推荐“模板调用法”！
1. 前往阿里后台的“管理模板”，点击“新增”，随便取个名字（比如“关联模板”）。
2. 同样切换到源代码模式，粘贴刚刚复制的代码并保存。
3. 回到你需要装修的产品发布页面，刷新一下。在你要插入的位置回车换行，接着点击屏幕右侧边栏刚刚做好的“关联模板”，模块就会瞬间插入到光标所在处！做成模板不仅插入快捷，还能在各个页面随时调用。

🖼️ 点击放大查看图示：管理模板的制作与侧边栏调用