如何给SHOPIFY网站添加“亚马逊购买”按钮?

如何给SHOPIFY网站添加“亚马逊购买”按钮?

有些卖家做独立站的目的可能更多的是给自己的亚马逊店铺导入精准的流量,独立站店铺作为中转,可以过滤没有实际购买欲望的劣质流量,让亚马逊产品 listing 页面保持在较高的转化率水平上,有利于提升 listing 页面的站内排名,从而提高产品销量。所以,这时候你的独立站店铺就会需要有一个“亚马逊购买”按钮,即“Buy on Amazon”。

小贴士
1. 在进行代码修改之前记得先去确认下模板编辑器中有没有相关功能的设置项,如果有的话,就没必要额外开发代码来实现了;
2. 在做任何大的代码修改之前,一定要记得备份模板,这样即使把模板改乱了后面也可以轻松回滚代码;
3. 需要懂一些基本的HTML、CSS、JS和liquid代码知识。

实现逻辑:

首先讲一下功能实现的逻辑,我们的目的是给某些特定的产品在它的详情页增加一个亚马逊购买按钮。所以,第一,我们需要给商品对象增加一个变量AMZ_US用来存储跳转连接;第二,我们需要在商品详情页加购按钮旁边写一个亚马逊购买按钮;第三,使用AMZ_US里储存的链接作为按钮的跳转链接;第四,根据需求调节按钮的样式。

操作步骤:

1、登陆到Shopify店铺后台, 找到Online Store > Themes
2、选择要编辑的模板,然后点击Actions > Edit Code
3、我们需要找到“加入购物车“按钮,代码形式一般为:<form action="/cart/add",或者直接搜索“AddToCartText”,一般是在product-template 这个文件中,或者有些模版可能是在 product-form 这个文件。

找到Add-to-cart按钮位置

4、复制以下代码到这个按钮代码部分的下一行,或者动态按钮的下面,根据自己的需求:

{% assign instructions = product.metafields.AMZ_US %}
{% assign key = 'AMZ_US' %}
{%if instructions.AMZ_US contains 'amazon' %}
<div class="btn-amazon">
<a style="text-decoration:none;" href="{{ instructions.AMZ_US }}">
<img src="https://www.yunecommerce.com/wp-content/uploads/2019/12/亚马逊购买按钮-Shopify外贸建站.png">
</a> </div> {% endif %}

代码安装位置示意图

亚马逊购买按钮-代码位置示意图

5、使用Metafield插件给商品创建变量,用来存储跳转链接,插件可以用
Metafields Master,或者Metafields Guru,免费的就行,操作请按照下面截图来:

亚马逊购买按钮-Metafield插件设置

6、完成后记得保存,然后去到网站前台,找到这个产品,查看效果:

亚马逊购买按钮-最终效果

到这里,Shopify独立站亚马逊购买按钮的安装就基本完成了,你可以根据自己的需要替换图片、调整样式或者位置等等。

发表评论

请注意,评论必须在发布之前获得批准。