Shopify Debut主题商品页面库存显示配置技术求助

Hey Lee, 刚看到你第一次用Shopify搭站，大部分流程都顺，唯独在Debut主题的商品页库存显示上卡壳了——我之前帮好几个做独立站的朋友搞定过这个问题，刚好能给你指条明路：

先补全代码并放对位置 #

你之前写的代码没写完，而且大概率是位置放错了（Debut主题对模板代码的位置要求挺严的）。正确的做法是：

1. 打开Shopify后台的「在线商店」→「主题」→「Debut」→「操作」→「编辑代码」
2. 找到并打开sections/product-template.liquid文件
3. 找到{% form 'product', product %}这个标签（所有商品表单相关的代码都要放在这个标签里），然后在变体选择器（比如<div class="product-form__controls">）的下方，插入这段完整的库存显示代码：

{% comment %} 商品页库存显示 - 适配Debut主题 {% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.inventory_management == 'shopify' %}
  <div id="variant-inventory" class="product-form__item">
    {% if current_variant.inventory_quantity > 0 %}
      {% if current_variant.inventory_quantity <= 5 %}
        <p class="inventory-low"><strong>仅剩 {{ current_variant.inventory_quantity }} 件库存！</strong></p>
      {% else %}
        <p class="inventory-in-stock">库存充足：{{ current_variant.inventory_quantity }} 件</p>
      {% endif %}
    {% else %}
      <p class="inventory-out-of-stock">暂时缺货</p>
    {% endif %}
  </div>
{% endif %}

加上变体切换的动态更新 #

上面的代码只能显示初始加载的库存，用户切换不同变体（比如颜色、尺寸）时，库存不会自动更新。你需要加一段JS代码来监听变体切换事件：
同样在product-template.liquid文件的末尾（{% endform %}标签之后），插入这段脚本：

// 监听变体切换，实时更新库存显示
document.addEventListener('DOMContentLoaded', function() {
  // 监听Debut主题自带的variantChange事件
  document.addEventListener('variantChange', function(event) {
    const variant = event.detail.variant;
    const inventoryEl = document.getElementById('variant-inventory');
    
    if (!variant || !inventoryEl) return;
    
    if (variant.inventory_management === 'shopify') {
      inventoryEl.style.display = 'block';
      if (variant.inventory_quantity > 0) {
        if (variant.inventory_quantity <= 5) {
          inventoryEl.innerHTML = `<p class="inventory-low"><strong>仅剩 ${variant.inventory_quantity} 件库存！</strong></p>`;
        } else {
          inventoryEl.innerHTML = `<p class="inventory-in-stock">库存充足：${variant.inventory_quantity} 件</p>`;
        }
      } else {
        inventoryEl.innerHTML = '<p class="inventory-out-of-stock">暂时缺货</p>';
      }
    } else {
      // 如果该变体不跟踪库存，隐藏库存显示
      inventoryEl.style.display = 'none';
    }
  });
});

调个样式让它更顺眼 #

最后可以加一点CSS，让库存显示和Debut主题的风格统一：
打开assets/theme.scss.liquid文件，在末尾插入这段样式：

/* 商品页库存显示样式 */
.inventory-low {
  color: #e63946; /* 红色提示缺货预警 */
  font-weight: 600;
  margin: 10px 0;
}
.inventory-in-stock {
  color: #2a9d8f; /* 绿色提示库存充足 */
  margin: 10px 0;
}
.inventory-out-of-stock {
  color: #6b7280; /* 灰色提示缺货 */
  margin: 10px 0;
}

几个关键注意事项 #

• 确保你的商品已经开启了Shopify库存管理：在商品编辑页的「库存」选项里，勾选「跟踪库存」并设置数量
• 如果你的Debut主题是2023年之后的新版本，先去「主题编辑器」→「产品页面」设置里看看有没有「显示库存数量」的开关——有的话直接开就行，不用改代码！
• 改代码前一定要备份原文件，以防改坏了可以一键恢复

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