Buy On Amazon按钮

实现方法：自定义Liquid

1. 在产品页面添加自定义Liquid

2. 添加以下代码

   {% unless product.metafields.custom.amazon_link == blank %}
     <a href="{{ product.metafields.custom.amazon_link }}" target="_blank" style="text-decoration: none;">
       <button type="button" class="btn button">
         <span>Buy on Amazon</span>
       </button>
     </a>
   
     <style>
       /* 默认按钮样式 */
       .btn.button {
         width: 100%;
         margin-top: 10px;
         color: #000;
         background-color: #ffa51d;
       }
   
       /* 媒体查询：屏幕宽度大于600px时的按钮样式 */
       @media screen and (min-width: 600px) {
         .btn.button {
           width: 80%;
         }
       }
     </style>
   {% endunless %}

3. 保存即可

亚马逊链接引用自元字段 custom.amazon_link

引用字段可自定义，使用现有的 SKU、Barcode也可以，引用代码如下

SKU  product.variants.first.sku

Barcode  product.variants.first.barcode

进阶按钮

如果想实现按钮跳动效果，从而吸引用户眼球，增加点击率可以尝试以下代码：

{% unless product.variants.first.barcode == blank %}
  <a href="{{ product.metafields.custom.amazon_link }}" target="_blank" style="text-decoration: none;">
    <button type="button" class="btn button shake-animation">
      <span>Buy on Amazon</span>
    </button>
  </a>

  <style>
    /* 默认按钮样式 */
    .btn.button {
      width: 100%;
      margin-top: 10px;
      color: #000;
      background-color: #ffa51d;
    }

    /* 媒体查询：屏幕宽度大于600px时的按钮样式 */
    @media screen and (min-width: 600px) {
      .btn.button {
        width: 80%;
      }
    }

    /* 动画样式 */
    .shake-animation {
      animation: shake 2s linear infinite;
      transform-origin: top right;
    }

    /* 定义动画效果 */
    @keyframes shake {
      0% { transform: translate(0, 0); }
      10% { transform: translate(3px, -3px); }
      20% { transform: translate(-3px, 3px); }
      30% { transform: translate(2px, -2px); }
      40% { transform: translate(-2px, 2px); }
      50% { transform: translate(0, 0); }
      100% { transform: translate(0, 0); }
    }
  </style>
{% endunless %}

如果需要自定义，只需修改其中引用代码和样式颜色即可。