祥助，店铺装修有轮播展示的代码吗？
安排，阅读这篇文章下载代码源码
装修国际站店铺的时候，经常能看见一些效果比较美观或炫酷的展示样式，他们是怎么做的呢？我们也想移植到自己的店铺装修里要怎么操作呢？今天为主的祥助从知识星球摘取了更新的一节更新的节选内容，分享一下国际站装修的产品轮播滚动的一段代码和操作方法。
如何加入祥助的知识星球？请点击阅读：E站的知识星球问答圈上线啦 | 硬核干货区
Tips：微信压缩GIF图的原因，看起来会发抖一样，实际是正常滚动的
产品轮播滚动代码
Code download
一
安装代码编辑器
首先我们需要在计算机上安装一款合适的代码编辑器，普通用户推荐安装Sublime Text 3，是主流代码编辑器中小巧精悍，深受程序员们喜爱的一款编辑器，并且启动速度算是快的。所以同时也很适合替代txt文本文档的功能使用，用来编辑一些文本文件，配置文件，参数文件等。推荐做阿里国际站运营的朋友也安装一款代码编辑器，来辅助解决日常工作中的一些使用需求。如何安装和汉化Sublime Text 3呢？请阅读：运营必备工具-Sublime Text 3的安装，汉化与配置。
如果你做运营的同时还做独立站官网的维护，相信你本身也有安装Microsoft Studio Code了，都可以用来编辑。
一
修改图片链接
下载代码关注公众号，回复：产品轮播代码，用安装好的代码编辑器打开国际站多个产品轮播滚动装修代码.html这个文件，首先使用Ctrl+F快捷键，搜索：background:url，可以定位到这一行代码
style="height:474px;width:1920px;background:url(//sc01.alicdn.com/kf/H1eb5fef85e32402ebe1122a037a45194G/200286375/H1eb5fef85e32402ebe1122a037a45194G.jpg);position:relative;"> 我们提取url里的链接，加上https:后复制到浏览器地址栏访问，可以看见这是一张底色的背景图。如果你有需求，可以用Photoshop进行修改，没有需求就保持不动。
接下来依然使用Ctrl+F快捷键，搜索：style="width:284px; 点击下一个依次可以看到有多个带有这行代码的代码段，用background-image:url写的。这里就是显示的产品图片的位置。我们在本地使用Photoshop将需要显示的产品图片修改好，注意几个点：
使用1：1的图像比例
图片尺寸为284*284像素，72或92dpi
产品位置居中美观
修改好这些图片后将其上传到图片银行，再分别获取图片在图片银行的链接，替换到上图里位于background-image:url里的位置，这样图片对应的链接就已经完成了替换啦。
一
修改产品链接
完成图片链接的修改后，可以看到紧跟着后面的代码段，有一段：<a href=“产品链接” target="_blank"> </a> 结构的代码段。分别将上面 background-image对应的产品的链接输入替换到a标签里的链接里（文件演示里使用的是阿里上随机搜索的一家店铺的链接，请删除换成自己的）target="_blank"的意思是客户点击产品主图的时候，会以新窗口的方式打开这个链接，而不会从当前页面跳转过去。
一
插入自定义装修
跟着祥助回到店铺装修的后台，从左侧装修菜单选择图文-自定义内容，插入一自定义模块。切换到源代码模式，粘贴代码，点击保存
Tips：切记，这里源代码模式直接点击保存，不要切换回可视化编辑，切换后阿里似乎会让部分代码删除
再点击预览-PC或直接发布页面，就可以看到滚动的效果了。如果需要全屏，请勾选自定义内容选择里的通栏展示。
效果演示：
{ 硬核干货区 }
想要看祥助更多分享的国际站运营篇内容？想探讨更多运营思路和操盘技巧？加入VIP运营群：E站VIP群-挖掘高阶操作，运营技巧，操盘思路，小黑科技扫码加入知识星球·小提示·
— 关注公众号：跨境E站，回复:关键词分词 —
可下载一键宏自动关键词分组表格.xsl
·End·
— 分享任意文章到朋友圈，截图给微信ID：Los_Vincent
—送运营必备工具箱—
跨境E站：https://www.yunglobe.com/
猜您喜欢往期精选▼6. 深入剖析阿里巴巴国际站P4P着陆页offer和premium
11. 分析阿里国际站产品galleryofferlist的url链接结构形式
亲的点赞和再看，是我继续更新的动力