Shopify产品详情页获取配送信息及可用配送方式的技术问询

可以实现，下面是两种实用方案，适配不同场景：

方案一：基于产品标签/元字段标记（简单易维护） #

这种方式适合配送规则仅和产品本身相关的场景，不需要依赖用户地址：

• 先给所有支持新配送方式的产品添加专属标签（比如supports-new-shipping），或者自定义元字段（比如custom.supports_new_shipping，值设为true）
• 找到产品详情页的模板文件（比如product.liquid或对应的section组件文件），添加以下Liquid判断逻辑：

用标签判断的代码示例： #

{% if product.tags contains 'supports-new-shipping' %}
  <div class="notification">
    提示：该商品支持新配送方式！
  </div>
{% endif %}

用元字段判断的代码示例： #

{% if product.metafields.custom.supports_new_shipping %}
  <div class="notification">
    提示：该商品支持新配送方式！
  </div>
{% endif %}

方案二：AJAX实时获取配送选项（精准适配地址规则） #

如果新配送方式的可用性和用户所在地址相关，就需要用这种方式，通过调用Shopify接口实时获取该商品的可用配送方式：

• 核心逻辑是临时将商品加入购物车，调用配送费率接口获取所有可用方式，判断是否包含目标方式后渲染通知，最后清空临时购物车
• 示例JavaScript代码（可放在产品详情页的脚本区域）：

// 替换成你的新配送方式handle
const targetShippingHandle = 'new-shipping-method';
// 从模板获取当前产品ID
const productId = {{ product.id }};

// 临时添加商品到购物车
fetch('/cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  },
  body: JSON.stringify({ id: productId, quantity: 1 })
})
.then(res => res.json())
.then(() => {
  // 请求可用配送费率
  return fetch('/cart/shipping_rates.json', { headers: { 'Accept': 'application/json' } });
})
.then(res => res.json())
.then(data => {
  // 检查是否存在目标配送方式
  const hasTargetMethod = data.shipping_rates.some(rate => rate.handle === targetShippingHandle);
  if (hasTargetMethod) {
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = '提示：该商品支持新配送方式！';
    // 把通知插入到产品表单上方，可根据需求调整位置
    document.querySelector('.product-form')?.before(notification);
  }
  // 清空临时购物车，避免影响用户操作
  return fetch('/cart/clear.js');
})
.catch(err => console.error('获取配送方式失败:', err));

两种方案对比 #

• 方案一：开发成本低，无需额外接口调用，但需要手动维护产品的标签/元字段，适合配送规则固定的场景
• 方案二：能精准匹配实际配送规则（包括地址限制），但需要处理购物车临时操作，开发复杂度稍高

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