如何在Shopify商品页面添加附加产品下拉选框并实现购物车联动

嘿，刚好我之前帮客户实现过一模一样的需求，给你一套亲测有效的方案，一步步来就行：

核心逻辑 #

我们要做三件事：在主商品页加个下拉选框展示附加产品，监听「Add to cart」按钮的点击事件，把主产品+选中的附加产品通过Shopify的AJAX接口一起提交到购物车，最后跳转到购物车页面。

步骤1：插入附加产品下拉选框 #

找到你的产品模板文件（一般是product.liquid或者sections/product-template.liquid），在「Add to cart」按钮上方插入这段代码：

{% comment %} 附加产品下拉选框 - 记得替换成你自己的产品Handle {% endcomment %}
<div class="product-add-on">
  <label for="add-on-product">搭配选购:</label>
  <select id="add-on-product">
    <option value="">不添加附加产品</option>
    {% assign add_on_product = all_products['blue-baseball-hat'] %} {% comment %} 这里替换成你的附加产品Handle（后台产品URL里的最后一段） {% endcomment %}
    {% if add_on_product.available %}
      <option value="{{ add_on_product.variants.first.id }}">{{ add_on_product.title }} - {{ add_on_product.variants.first.price | money }}</option>
    {% else %}
      <option value="" disabled>该附加产品暂时缺货</option>
    {% endif %}
  </select>
</div>

如果需要多个附加产品选项，把上面的add_on_product改成数组循环就行，比如：

{% assign add_on_handles = ['blue-hat', 'red-socks', 'black-bag'] %}
{% for handle in add_on_handles %}
  {% assign add_on_product = all_products[handle] %}
  {% if add_on_product.available %}
    <option value="{{ add_on_product.variants.first.id }}">{{ add_on_product.title }} - {{ add_on_product.variants.first.price | money }}</option>
  {% endif %}
{% endfor %}

步骤2：重写「Add to cart」按钮的点击逻辑 #

在模板文件的末尾（或者你的自定义JS文件里）添加这段JavaScript代码，替换默认的表单提交行为：

document.addEventListener('DOMContentLoaded', function() {
  const addToCartBtn = document.getElementById('AddToCart');
  const addOnSelect = document.getElementById('add-on-product');
  
  addToCartBtn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认提交
    
    // 获取主产品当前选中的变体ID（Shopify默认模板会有这个隐藏输入框）
    const mainVariantId = document.querySelector('[name="id"]').value;
    
    // 准备要加入购物车的商品列表
    const cartItems = [{
      id: mainVariantId,
      quantity: 1
    }];
    
    // 如果选中了附加产品，追加到列表里
    const addOnVariantId = addOnSelect.value;
    if (addOnVariantId) {
      cartItems.push({
        id: addOnVariantId,
        quantity: 1
      });
    }
    
    // 调用Shopify AJAX接口添加商品
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({ items: cartItems })
    })
    .then(res => res.json())
    .then(data => {
      // 成功后跳转到购物车页面
      window.location.href = '/cart';
    })
    .catch(err => {
      console.error('添加失败:', err);
      alert('商品添加失败，请稍后重试');
    });
  });
});

说明：如果你的产品是多变体（比如不同尺寸/颜色），这段代码能自动获取当前选中的变体ID；如果需要让用户调整附加产品的数量，加个数量输入框，把quantity改成输入框的值就行。

步骤3：样式优化（可选） #

给附加产品选框加些基础样式，让它和页面风格统一：

.product-add-on {
  margin: 1.5rem 0;
}
.product-add-on label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.product-add-on select {
  padding: 0.7rem;
  width: 100%;
  max-width: 320px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 1rem;
}

注意点 #

• 确保附加产品是已发布状态，且有库存（如果开了库存跟踪）
• 如果你的主题用了第三方购物车插件，需要稍微调整代码适配主题的现有逻辑
• 测试时要验证：不选附加产品能正常加主产品，选了附加产品能同时加两个，缺货的附加产品会被禁用

内容的提问来源于stack exchange，提问作者Aashish Bhatt