如何开发在商品详情页添加自定义输入字段的Shopify应用？

方案对比与选择 #

1. App Blocks（主题扩展） #

这是Shopify官方推荐的现代集成方案，仅支持Online Store 2.0及以上主题。

• 优势：和主题原生集成度高，商家可在主题编辑器里拖拽调整字段位置；无需额外JS注入，稳定性强；符合Shopify App的最佳实践。
• 劣势：不兼容老版本主题（Online Store 1.0）。
• 适用场景：目标用户以使用2.0+主题的商家为主时优先选择。

2. Script Tags #

通过向页面注入JS代码动态添加自定义字段，兼容所有主题。

• 优势：支持所有主题版本，无需商家修改主题代码；开发周期相对短。
• 劣势：依赖前端JS，可能和主题原有JS冲突；Shopify对Script Tags有加载限制（如延迟加载），可能出现字段加载不及时的问题；用户体验不如App Blocks。
• 适用场景：需要兼容全版本主题，或快速验证功能原型时选用。

3. 直接修改主题代码（不推荐） #

虽能实现需求，但商家更新主题时会丢失自定义内容，且不符合App Store的审核规范，不建议作为App的核心实现方式。

自定义字段同步到购物车与订单 #

无论选用哪种方案，都需要通过Shopify的Cart API将字段值同步：

1. 收集用户输入的字段值，在加购时通过/cart/add.js接口传入properties参数：

// 示例：监听加购按钮点击，提交自定义字段
document.querySelector('[data-add-to-cart]').addEventListener('click', async (e) => {
  e.preventDefault();
  const variantId = document.querySelector('[name="id"]').value;
  const customFieldValue = document.getElementById('custom-field').value;

  try {
    await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: variantId,
        quantity: 1,
        properties: {
          '客户自定义信息': customFieldValue
        }
      })
    });
    window.location.href = '/cart'; // 跳转购物车页
  } catch (error) {
    console.error('加购失败:', error);
  }
});

2. 传入的properties会自动同步到购物车页面，且会保留在订单详情中（商家后台、客户订单页都能查看）。

价格调整实现 #

1. Shopify Plus商家（推荐） #

使用Shopify Scripts（Ruby脚本）在结算环节调整价格，安全可靠：

# 示例：根据自定义字段值添加额外费用
Input.cart.line_items.each do |line_item|
  if line_item.properties['定制类型'] == '高级定制'
    # 加价10美元（单位为分）
    line_item.change_line_price(line_item.price + 1000, message: '高级定制服务费')
  end
end

2. 非Plus商家 #

• 前端动态展示：通过JS实时计算并更新页面价格，但需在App后端通过订单Webhook验证价格，防止前端篡改。
• 自定义变体：如果字段选项是固定的（如"普通/高级定制"），可提前为商品创建对应变体，不同变体设置不同价格，用户选择字段时自动切换变体。

入门步骤 #

1. 准备开发环境：注册Shopify Partner账号，创建开发店铺，安装Shopify CLI。
2. 实现字段：
   • App Blocks：用Shopify CLI生成App，添加theme_extension类型的扩展，在blocks/目录下编写字段的Liquid代码，然后在开发店铺的主题编辑器中把该Block添加到商品详情页的表单区域。
   • Script Tags：通过Shopify API创建Script Tag，指向你托管的JS文件，JS中动态将字段插入到加购表单内（参考上文代码示例）。
3. 测试验证：加购商品，检查购物车是否显示字段；下单后查看商家后台订单详情，确认字段已同步。
4. 价格调整测试：根据商家类型选择对应方案，测试价格变动是否生效。

参考资料 #

• Shopify开发者文档：重点查看「App Extensions > Theme Extensions」「Script Tags API」「Cart API」「Shopify Scripts」章节
• Shopify CLI官方教程：学习快速创建和测试App扩展
• Shopify Partner Dashboard示例App：参考官方提供的自定义字段相关实现代码

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