Shopify Liquid商品表单无法添加商品至购物车问题排查

我正在构建Shopify Liquid主题区块，用来展示商品变体列表，商品通过区块设置配置，每个变体都要配备加入购物车按钮。使用Liquid form标签创建按钮后，点击会跳转到购物车页面，但商品并未成功添加。

当前代码 #

使用Liquid form标签的实现 #

{% form 'product', section.settings.product %}
  <input
    type="hidden"
    name="id"
    value="{{ variant.id }}"
  >
  <input type="hidden" name="quantity" min="1" value="1">
  {% render 'button', label: section.settings.button_label, button_size: 'small', linkless_type: 'submit' %}
{% endform %}

注：使用了自定义按钮代码片段，并设置了type="submit"。

替换为常规HTML表单的尝试 #

<form method="post" action="/cart/add">
  <input
    type="hidden"
    name="id"
    value="{{ variant.id }}"
  >
  <input type="hidden" name="quantity" min="1" value="1">
  {% render 'button', label: section.settings.button_label, button_size: 'small', linkless_type: 'submit' %}
</form>

环境 #

• 本地通过Shopify CLI以开发模式运行主题
• 通过模板编辑器预览结果

已尝试的排查操作 #

• 将variant.id和selected_or_first_available_variant.id传入name="id"的隐藏输入框，均无效
• 替换为直接指向/cart/add的常规HTML表单，问题依旧

建议排查方向 #

1. 验证变体有效性：确认当前variant.id对应的变体处于可售状态（库存充足、未归档、已分配到当前销售渠道）。可在代码中添加调试输出：{{ variant | json }}，查看available字段是否为true。
2. 检查表单提交数据：打开浏览器开发者工具的「网络」面板，查看表单提交请求的Form Data，确认id是有效的变体ID，quantity参数正确。
3. 确认按钮渲染结果：右键检查按钮元素，确认最终HTML是<button type="submit">，而非普通按钮或链接。
4. 排查表单嵌套/冲突：检查自定义按钮片段中是否存在意外的表单嵌套，确保页面中每个购物车表单都是独立的（Shopify允许单页多表单，但需避免嵌套）。
5. 检查主题JS拦截：部分主题会用JS拦截表单提交实现AJAX加购，若区块未适配该逻辑，可能导致提交异常。可暂时禁用主题自定义JS，测试是否能正常添加商品。

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