第 95 期 Shopify 免插件添加亚马逊购买按钮 点击跳转到指定链接

点击这里查看视频演示     本期 YouTube 链接(免登录观看 4K)

💡
如果你需要为不同国家的访客,设置不同的亚马逊链接,例如 /ca, /de, /au 等;或者想为不同变体单独设置不同亚马逊链接,可以添加微信跟我联系:Shopify2006

免插件在 Shopify 店铺产品页面添加亚马逊按钮,每个产品可以设置不同的对应链接,不设置链接将不显示按钮。

  • 创建元字段的时候,复制这一段,删除后台自动填充的再粘贴:
my_fields.amazon_link
  • 这部分代码,用于加到主题文件里,加购按钮下方
{% unless product.metafields.my_fields.amazon_link == blank %}
   <a href="{{product.metafields.my_fields.amazon_link}}" target="_blank" style="text-decoration: none;">
   <button type="button" class="btn button" style="width: 100%; margin-top: 10px; color: #000;background-color: #ffa51d;"><span>Buy on Amazon</span></button></a>
{% endunless %}
💡
注意:Metafields 创建和引用的必须一致!

如果你创建的是 product.metafields.my_fields.amazon_link 就用 product.metafields.my_fields.amazon_link

如果你创建元字段时删掉了 amazon_link 中间的下划线,那上面引用的代码也要删掉下划线!

添加代码后,如果你的代码操作没问题, 要设置链接才会显示按钮!

还有,如果你没有加到在线主题,就要预览对应的主题链接。

如果以上操作都没问题,那你可能加错了位置,别为难自己了,也别为难我,可微信发红包协助添加。或者去用插件,如果你不在意网速的话。

绝大部分人都能对照教程完成操作,但偶尔也会遇到一两个奇葩选手,工作过程中被打断,挑战我的忍耐上限 :(
  • 部分主题间距等样式可能需要微调。示例效果:
Shopify 产品页 Buy on Amazon 亚马逊购买按钮

协助处理

  • 如果不想自己添加,或者搞不定,需要协助添加,可以购买此作品

有帮助? 请 up 主喝奶茶(页面右侧)

第 143 期 一元开店 低成本拥有你自己的 Shopify 店铺
限时福利:既可用于创建新的店铺,也可以创建测试店铺(例如免费试用插件 APP 等),避免测试插件时代码残留在主题中,拖慢店铺网速。

另有带 Amazon 图片版本

Shopify 亚马逊购买按钮带图片版本

SVIP 可一键复制代码:

以下内容只有授权的 SVIP 用户才能查看

目前已有 296 位 SVIP, 如果你还不是

可微信私聊: Shopify2006 或 扫码 ↓

Shopify2006_Wechat

别人能学会的, 你也能会

来自 Shopify 官方的介绍

内容标签:   #B站教程,   #店铺运营,   #扩展内容