Shopify产品网格中为单个商品添加独立购买按钮的方法

修复代码 #

将你当前的表单代码替换为以下内容：

<form class="spf-product__form buy_now_button" action="/cart/add" method="post">
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="return_to" value="/checkout">
    <button type="submit" class="spf-product__form-btn-addtocart">
        Buy Now
    </button>
</form>

关键修改说明 #

• 修正表单提交地址：原代码直接提交到/checkout，未携带商品信息，导致跳转后无法识别对应商品。改为提交到/cart/add，先将目标商品加入购物车，再跳转至结账页面，符合Shopify的标准购买流程。
• 添加商品识别字段：name="id"的隐藏输入是核心，{{ product.selected_or_first_available_variant.id }}是Shopify Liquid变量，会自动渲染当前商品的首个可用变体ID，确保系统能识别要购买的具体商品。
• 配置跳转逻辑：name="return_to"字段指定商品加入购物车后直接跳转到结账页面，实现“立即购买”的预期效果。
• 设置购买数量：默认数量设为1，可根据需求修改value数值。

变体商品额外处理 #

如果你的商品包含多尺寸、颜色等变体，需确保用户选择变体后，name="id"的隐藏字段值同步更新为选中的变体ID，否则会默认使用商品的首个可用变体。

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