如何用Shopify liquid/js实现点击按钮同时添加3件商品到购物车

数据老陈

2026-9-27

这个需求完全可以通过Liquid + JS实现，无需安装任何Shopify应用，具体实现方案如下：

实现逻辑

直接调用Shopify原生的AJAX购物车接口/cart/add.js，通过Liquid获取当前商品的ID和选中规格ID，点击按钮时提交数量为3的添加请求即可。

具体操作步骤

第一步：找到商品详情页对应的Liquid模板文件，通常是主题目录下的templates/product.liquid或者sections/product-template.liquid，在你想要展示按钮的位置插入以下代码：

<button 
  id="add-three-to-cart" 
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
  class="your-theme-button-class"
>
  添加3件到购物车
</button>

你可以把your-theme-button-class替换成你店铺主题自带的按钮类名，让样式和现有按钮保持统一。

第二步：在主题的全局JS文件（通常是theme.js或者custom.js）中添加以下交互代码：

document.addEventListener('DOMContentLoaded', function() {
  const addThreeBtn = document.getElementById('add-three-to-cart');
  if (!addThreeBtn) return;

  addThreeBtn.addEventListener('click', function() {
    const variantId = parseInt(this.dataset.variantId);
    // 构造请求参数
    const addItemData = {
      id: variantId,
      quantity: 3
    };

    // 调用Shopify原生加购接口
    fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify(addItemData)
    })
    .then(response => {
      if (!response.ok) throw new Error('库存不足或商品不存在');
      return response.json();
    })
    .then(data => {
      // 加购成功后的自定义操作，比如更新购物车数量、弹出提示
      alert('已成功添加3件商品到购物车');
      // 可选：如果主题支持无刷新更新购物车，可替换成对应方法，无需刷新页面
      window.location.reload();
    })
    .catch(error => {
      alert(error.message);
    });
  });

  // 如果商品有多规格，需要添加这段代码监听规格变化，实时更新选中的规格ID
  document.querySelectorAll('input[name="id"], select[name="id"]').forEach(variantSelector => {
    variantSelector.addEventListener('change', function() {
      addThreeBtn.dataset.variantId = this.value;
    });
  });
});

注意事项

部分老版本主题可能不支持window.Shopify.routes.root，直接替换成/即可正常使用
可以根据店铺的交互风格，把代码中的alert提示替换成主题自带的提示组件，体验更统一
加购成功后的刷新操作可以替换成主题自带的购物车抽屉/数量更新方法，实现无刷新加购

内容的提问来源于stack exchange，提问作者Klaudia Kuźdub