Shopify商品网格：将Coming Soon集合缺货商品提示改为Coming Soon

问题描述 #

现有Shopify主题在商品缺货时，商品图片上方显示“Stock Out”横幅。需求是：若商品属于“Coming Soon”集合，缺货时横幅改为显示“Coming Soon”。修改product-grid-item.liquid代码后未生效，所有缺货商品仍显示“Stock Out”。

原代码片段 #

<a href="{{ product.url | within: current_collection }}" class="product-grid-item">
<div class="product-grid-image">
<div class="product-grid-image--centered">
  {% if sold_out %}
   <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
  {% endif %}
...

修改后无效的代码 #

<!--  added ###For Test ###  -->
{% assign found_collection = false %}

{% for collection in product.collections %}
   {% if collection.handle contains 'Coming Soon' %}
      {% assign found_collection = true %}
      {% break %}
   {% endif %}
   {% endfor %}
   {% if found_collection %}
      <div class="badge badge--sold-out"><span class="badge-label">Coming Soon</span></div> 
   {% else %}
      <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>  <!-- this is the original line of code -->
  {% endif %}
<!-- end of added code -->

问题原因 #

1. 集合Handle格式不匹配：Shopify自动生成集合的handle时，会将标题中的空格替换为横杠、字母转为小写，特殊字符会被过滤。例如标题“Coming Soon ...”对应的handle是coming-soon，而非包含空格和大写字母的“Coming Soon”，导致contains判断失效。
2. 丢失缺货判断逻辑：修改后的代码移除了原有的{% if sold_out %}外层判断，可能导致逻辑执行时机错误。

修正后的代码 #

{% if sold_out %}
  {% assign is_coming_soon = false %}
  {% for collection in product.collections %}
    {% if collection.handle contains 'coming-soon' %}
      {% assign is_coming_soon = true %}
      {% break %}
    {% endif %}
  {% endfor %}

  <div class="badge badge--sold-out">
    <span class="badge-label">
      {% if is_coming_soon %}
        Coming Soon
      {% else %}
        {{ 'products.product.sold_out' | t }}
      {% endif %}
    </span>
  </div>
{% endif %}

关键调整说明 #

• 保留原有的{% if sold_out %}判断，确保仅缺货商品显示横幅。
• 将集合handle的匹配条件改为小写的coming-soon，适配Shopify的自动生成规则。
• 优化变量命名为is_coming_soon，提升代码可读性。

验证技巧 #

若不确定集合的实际handle，可临时添加代码输出商品所属集合的handle值，确认匹配条件：

{% for collection in product.collections %}
  {{ collection.handle }}<br>
{% endfor %}

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