释放双眼，带上耳机，听听看~！
一、添加到产品详情页
1、添加后效果如下
2、添加元字段，后台——设置——Metafields——点击Products选项——添加元字段amazon_link (请参考下图设置,字段命名可以根据自己的喜好来，必须保证插入的元字段名与设置的一致)
3、我们以shopify2.0模板为例，打开“模板”——“自定义”——“选择产品模板”——“在产品详情页需要的地方插入自定义代码”
代码如下
/*
第1行if判断是否输入链接，输入显示按钮，没输入隐藏
第2行具体按钮html代码与class样式根据模板不同进行调整
请注意下面与自动名称必须与你设置的一致，这段备注代码不用复制
*/
{% if product.metafields.custom.amazon_link %}
<a class="button amazon" target=_blank href="{{product.metafields.custom.amazon_link}}">
<span>
<svg t="1661851395404" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1653" width="16" height="16"><path d="M825 768.9c-3.3-0.9-7.3-0.4-11.9 1.3-61.6 28.2-121.5 48.3-179.7 60.2C507.7 856 385.2 842.6 266 790.3c-33.1-14.6-79.1-39.2-138-74-1.6-1.2-3.3-1.9-5.3-2-2-0.1-3.7 0.1-5.3 0.9-1.6 0.8-2.8 1.8-3.7 3.1-0.9 1.3-1.1 3.1-0.4 5.4 0.6 2.2 2.1 4.7 4.6 7.4 10.4 12.2 23.3 25.2 38.6 39s35.6 29.4 60.9 46.8c25.3 17.4 51.8 32.9 79.3 46.4 27.6 13.5 59.6 24.9 96.1 34.1s73 13.8 109.4 13.8c36.2 0 71.4-3.7 105.5-10.9 34.2-7.3 63-15.9 86.5-25.9 23.4-9.9 45-21 64.8-33 19.8-12 34.4-22.2 43.9-30.3 9.5-8.2 16.3-14.6 20.2-19.4 4.6-5.7 6.9-10.6 6.9-14.9 0.1-4.5-1.7-7.1-5-7.9zM527.4 348.1c-15.2 1.3-33.5 4.1-55 8.3-21.5 4.1-41.4 9.3-59.8 15.4s-37.2 14.6-56.3 25.4c-19.2 10.8-35.5 23.2-49 37s-24.5 31.1-33.1 52c-8.6 20.8-12.9 43.7-12.9 68.7 0 27.1 4.7 51.2 14.3 72.5 9.5 21.3 22.2 38 38.2 50.4 15.9 12.4 34 22.1 54 29.2 20 7.1 41.2 10.3 63.2 9.4 22-0.9 43.5-4.3 64.4-10.3 20.8-5.9 40.4-15.4 58.6-28.3 18.2-12.9 33.1-28.2 44.8-45.7 4.3 6.6 8.1 11.5 11.5 14.7l8.7 8.9c5.8 5.9 14.7 14.6 26.7 26.1 11.9 11.5 24.1 22.7 36.3 33.7l104.4-99.9-6-4.9c-4.3-3.3-9.4-8-15.2-14.3-5.8-6.2-11.6-13.1-17.2-20.5-5.7-7.4-10.6-16.1-14.7-25.9-4.1-9.8-6.2-19.3-6.2-28.5V258.7c0-10.1-1.9-21-5.7-32.8-3.9-11.7-10.7-24.5-20.7-38.3-10-13.8-22.4-26.2-37.2-37-14.9-10.8-34.7-20-59.6-27.4-24.8-7.4-52.6-11.1-83.2-11.1-31.3 0-60.4 3.7-87.6 10.9-27.1 7.3-50.3 17-69.7 29.2-19.3 12.2-35.9 26.3-49.7 42.4-13.8 16.1-24.1 32.9-30.8 50.4-6.7 17.5-10.1 35.2-10.1 53.1L408 310c5.5-16.4 12.9-30.6 22-42.8 9.2-12.2 17.9-21 25.8-26.5 8-5.5 16.6-9.9 25.7-13.2 9.2-3.3 15.4-5 18.6-5.4 3.2-0.3 5.7-0.4 7.6-0.4 26.7 0 45.2 7.9 55.6 23.6 6.5 9.5 9.7 23.9 9.7 43.3v56.6c-15.2 0.6-30.4 1.6-45.6 2.9zM573.1 500c0 16.6-2.2 31.7-6.5 45-9.2 29.1-26.7 47.4-52.4 54.8-22.4 6.6-43.7 3.3-63.9-9.8-21.5-14-32.2-33.8-32.2-59.3 0-19.9 5-36.9 15-51.1 10-14.1 23.3-24.7 40-31.7s33-12 49-14.9c15.9-3 33-4.8 51-5.4V500z m335.2 218.9c-4.3-5.4-15.9-8.9-34.9-10.7-19-1.8-35.5-1.7-49.7 0.4-15.3 1.8-31.1 6.2-47.3 13.4-16.3 7.1-23.4 13.1-21.6 17.8l0.7 1.3 0.9 0.7 1.4 0.2h4.6c0.8 0 1.8-0.1 3.2-0.2 1.4-0.1 2.7-0.3 3.9-0.4 1.2-0.1 2.9-0.3 5.1-0.4 2.1-0.1 4.1-0.4 6-0.7 0.3 0 3.7-0.3 10.3-0.9 6.6-0.6 11.4-1 14.3-1.3 2.9-0.3 7.8-0.6 14.5-0.9 6.7-0.3 12.1-0.3 16.1 0 4 0.3 8.5 0.7 13.6 1.1 5.1 0.4 9.2 1.3 12.4 2.7 3.2 1.3 5.6 3 7.1 5.1 5.2 6.6 4.2 21.2-3 43.9s-14 40.8-20.4 54.2c-2.8 5.7-2.8 9.2 0 10.7s6.7 0.1 11.9-4c15.6-12.2 28.6-30.6 39.1-55.3 6.1-14.6 10.5-29.8 13.1-45.7 2.4-15.9 2-26.2-1.3-31z" p-id="1654"></path></svg>
</span>
Shop on Amazon
</a>
<style>
.amazon {
text-align: center;
display: block;
width: 100%;
color: #000;
background: #FFD814;
padding: 10px 20px;
border-radius: 4px;
}
.amazon:hover { color: #000; background: #e9a800; }
</style>
{% endif %}
二、添加到产品列表页
1、在主题里面找到产品卡片模块，名字一般是“product-card.liquid”“card-product.liquid”或者参考下图
2、搜索 {{ product.title }} 字段，定位到标题字段，可以把根据需要放到你产品卡片的任何地方
3、代码与详情页的类似，部分情况需要修改。标题字段大部分是 {{ product.title }} 或 {{ card_product.title | escape }}….不同主题会有一点区别，根据你的主题修改代码
标题字段是 {{ product.title }}
{% if product.metafields.custom.amazon_link %}
<a class="button amazon" target=_blank href="{{product.metafields.custom.amazon_link}}"> Shop on Amazon </a>
{% endif %}标题字段是 {{ card_product.title }}
{% if card_product.metafields.custom.amazon_link %}
<a class="button amazon" target=_blank href="{{card_product.metafields.custom.amazon_link}}"> Shop on Amazon </a>
{% endif %}其他情况按上面的规则修改测试即可
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
