Shopify Dawn主题：基于供应商与客户标签隐藏商品价格问题

需求与问题 #

我们运营的Shopify店铺采用Dawn主题，做B2B+B2C业务，需实现：

• 品牌「Dahua」的商品价格仅对带有「trade5」标签的已审核登录客户可见，这类客户可正常下单
• 不符合条件的客户（未登录/无trade5标签），隐藏Dahua商品的价格和购买入口
• 其他品牌商品正常显示价格与购买入口

当前问题：

• 现有代码在商品详情页正常生效
• 首页和集合页的双条件判断失效：要么Dahua商品的限制规则不生效，要么移除供应商判断后，规则错误应用到所有品牌商品
• 尝试过商品标签、unless、for标签等写法，均未解决

尝试过的代码块 #

代码1 #

{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign ProductsVendorDowncased = product.vendor | downcase %}
 
 {%- if customersTagsDowncased contains 'trade5' -%}
 {%- else -%}
    {%- if ProductsVendorDowncased contains 'dahua' -%}
      <style>
        .product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {
         display: none !important;
       </style>
    {%- endif -%}
 {%- endif -%}

代码2 #

{% unless customer.tags contains "trade5" %}
  {% if product.vendor contains "dahua" %}
    <style>
      .product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {
       display: none !important;
    </style>
  {% endif %}
{% endunless %}

修复方案（无需插件） #

核心思路 #

首页/集合页通过循环渲染商品卡片，之前的代码要么样式作用域错误，要么变量判断逻辑未适配循环场景。正确做法是针对单个商品卡片添加条件类，再通过全局CSS控制元素显示。

步骤1：修改商品卡片模板 #

找到Dawn主题中渲染商品卡片的文件（通常为snippets/card-product.liquid），在卡片根元素上添加条件判断类：

{% assign current_vendor = product.vendor | downcase %}
{% assign has_trade5_tag = false %}
{% if customer %}
  {% assign has_trade5_tag = customer.tags | downcase | contains: 'trade5' %}
{% endif %}

<!-- 给卡片根元素添加条件类 -->
<div class="card {% unless has_trade5_tag and current_vendor == 'dahua' %}hide-dahua-elements{% endunless %}">
  <!-- 原有卡片内容保持不变 -->
</div>

步骤2：添加全局CSS样式 #

在主题的base.css或component-card.css文件末尾添加以下样式：

/* 隐藏不符合条件的Dahua商品的价格与购买入口 */
.hide-dahua-elements .price__container,
.hide-dahua-elements .card-information,
.hide-dahua-elements .quick-add,
.hide-dahua-elements .product-form__buttons {
  display: none !important;
}

步骤3：优化商品详情页代码 #

商品详情页的代码可调整为更简洁的写法，确保逻辑一致：

{% assign current_vendor = product.vendor | downcase %}
{% assign has_trade5_tag = customer.tags | downcase | contains: 'trade5' if customer %}

{% unless customer and has_trade5_tag and current_vendor == 'dahua' %}
  <style>
    .product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {
      display: none !important;
    }
  </style>
{% endunless %}

失效原因说明 #

1. 首页/集合页的循环场景中，若将<style>写在循环外，会导致所有商品应用最后一个商品的判断结果
2. 循环内重复生成<style>标签会引发样式冲突，且优先级无法保证
3. 未统一将product.vendor转小写，可能因大小写不一致导致判断失败

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