Shopify技术需求：为售罄商品缩略图添加透明度效果

当然可行！这在Shopify主题定制里是非常常见的需求，咱们可以通过Liquid模板逻辑判断 + CSS样式轻松搞定，下面结合你给出的代码片段来一步步实现：

步骤1：在Liquid中给售罄商品标记特殊类 #

首先，找到你商品缩略图的容器元素（通常是包裹商品图片的<div>或者<a>标签），在里面加入Liquid判断，当商品售罄时添加一个自定义类（比如out-of-stock）。

假设你的缩略图结构和商品详情是关联的，你可以这样修改：

<!-- 假设这是商品缩略图的容器 -->
<div class="product-thumbnail {% if product.available == false %}out-of-stock{% endif %}">
  <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
</div>

<!-- 你原有的商品详情代码 -->
<div class="product-details"> 
  {% if settings.display_vendor %} 
    <span itemprop="brand" class="brand">{{ product.vendor }}</span> 
  {% endif %} 
  <span class="title" itemprop="name">{{ product.title }}</span> 
  {% if collection_handles contains 'coming-soon' %} 
    <span class="modal_price">{{ 'collections.general.coming_soon' | t }}</span> 
  {% else %} 
    <span class="price">{% comment %} 这里是你原有的价格逻辑 {% endcomment %}</span>
  {% endif %}
</div>

注：product.available是Shopify的内置属性，会自动判断商品是否有可售库存（包括变体库存），如果所有变体都售罄，这个值会返回false。

步骤2：添加CSS样式实现透明度 #

接下来在你的主题CSS文件（通常是theme.css或者base.css）里添加以下样式，给标记了out-of-stock的缩略图设置透明度：

/* 售罄商品缩略图透明度效果 */
.product-thumbnail.out-of-stock img {
  opacity: 0.5; /* 透明度值，0完全透明，1完全不透明，可根据需求调整 */
  /* 可选：添加灰度效果增强售罄视觉提示 */
  filter: grayscale(80%);
}

额外提示 #

如果你的主题是基于变体库存判断（比如部分变体售罄，商品整体仍显示可售），你可以进一步修改逻辑：比如监听变体切换事件，动态给缩略图添加/移除out-of-stock类，但这需要结合JavaScript来实现；如果你只需要处理完全售罄的商品，上面的方法就足够啦。

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