Shopify Dawn主题：仅隐藏独立页面B2B产品价格的技术求助

核心思路 #

通过产品标签区分B2B产品 + 页面标识定位目标独立页面，实现仅在指定页面隐藏对应产品价格，不影响全店其他页面。

具体步骤 #

1. 给B2B产品打专属标签 #

进入Shopify后台，选中需要隐藏价格的B2B产品，给它们统一添加标签（比如b2b-no-price），支持批量选中产品后批量添加标签，提高效率。

2. 获取目标独立页面的标识 #

打开目标独立页面的编辑页，查看URL：

• 如果URL是你的店铺域名/pages/b2b-wholesale，页面的handle就是b2b-wholesale；
• 或者直接取页面ID，URL中类似.../pages/123456的数字就是页面ID。

3. 修改Liquid代码实现精准判断 #

根据页面使用的模板，找到对应渲染产品价格的代码块，加入判断逻辑：

情况1：独立页面用自定义页面模板（如page.b2b.liquid）

找到模板中渲染产品价格的代码（通常是{{ product.price | money }}相关代码），替换为：

{% if page.handle == 'b2b-wholesale' and product.tags contains 'b2b-no-price' %}
  <span class="price-alternative">请联系我们获取报价</span>
{% else %}
  <span class="product-price">{{ product.price | money }}</span>
{% endif %}

把b2b-wholesale换成你实际的页面handle，b2b-no-price换成你给产品加的标签。

情况2：独立页面用产品列表区块

如果页面是通过添加「产品列表」区块实现的，找到区块对应的Liquid文件（比如sections/product-grid.liquid），在产品价格的代码段外层包裹判断：

{% if page.handle == 'b2b-wholesale' and product.tags contains 'b2b-no-price' %}
  <!-- 隐藏价格，显示替代文本 -->
  <p class="price-hidden">询价请联系客服</p>
{% else %}
  <!-- 保留原价格渲染代码 -->
  <div class="price">
    {{ product.price | money }}
  </div>
{% endif %}

4. 可选：CSS辅助隐藏（针对特殊渲染场景） #

如果有些价格元素通过Liquid不好直接修改，可结合页面专属类名+产品标签类名实现：

1. 先在产品容器添加标签类：

<div class="product-card {% if product.tags contains 'b2b-no-price' %}b2b-product{% endif %}">
  <!-- 产品内容 -->
</div>

2. 在主题CSS文件（如assets/theme.css）中添加：

/* 仅在目标独立页面隐藏B2B产品价格 */
.page-handle-b2b-wholesale .b2b-product .price {
  display: none;
}
/* 添加替代文本 */
.page-handle-b2b-wholesale .b2b-product .price:after {
  content: "请咨询报价";
  color: #777;
  font-size: 14px;
}

5. 测试验证 #

保存所有修改后，访问目标独立页面，确认带标签的B2B产品价格已隐藏/替换为自定义文本，同时检查其他页面、非标签产品的价格显示正常。

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