Shopify中如何用Liquid判断产品未关联集合并隐藏页面元素

要实现“产品未关联任何集合时隐藏指定页面元素”的需求，核心是利用Liquid对产品对象的collections属性进行判断，具体实现方式有以下几种：

方式一：仅当产品关联集合时渲染元素 #

直接通过条件判断控制元素的渲染，只有产品存在至少一个关联集合时，才输出指定元素：

{% if product.collections.size > 0 %}
  <!-- 这里是你需要控制显示/隐藏的页面元素 -->
  <div class="collection-related-section">
    <h3>同系列产品</h3>
    <!-- 元素的具体内容 -->
  </div>
{% endif %}

方式二：用反向判断控制渲染 #

使用unless语句，逻辑是“除非产品关联了集合，否则不渲染元素”，和方式一效果一致：

{% unless product.collections == empty %}
  <!-- 目标页面元素 -->
  <div class="collection-related-section">
    <h3>同系列产品</h3>
    <!-- 元素的具体内容 -->
  </div>
{% endunless %}

方式三：通过CSS类控制显示状态 #

如果需要保留元素DOM结构，仅通过样式隐藏，可以给元素动态添加隐藏类：

<div class="collection-related-section {% if product.collections == empty %}hidden{% endif %}">
  <h3>同系列产品</h3>
  <!-- 元素的具体内容 -->
</div>

对应的CSS样式（可添加到主题样式文件中）：

.hidden {
  display: none;
}

逻辑说明 #

• product.collections：Shopify产品对象的内置属性，返回当前产品所属的所有集合（包括手动集合和智能集合）组成的数组
• .size：Liquid数组的内置属性，用于获取数组的元素数量，size > 0表示产品至少关联了一个集合
• empty：Liquid数组的内置判断属性，product.collections == empty可直接判断产品未关联任何集合

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