Javascript Shopify-更改已售罄的产品'；拇指指甲

我想有一个不透明的应用到缩略图时，一篇文章已经售罄，有可能吗

<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 {% if product.compare_at_price_max > product.price %}sale{% endif %}">
      {% if product.available %}
        {% if product.price_varies and product.price_min > 0 %}
          <small><em>{{ 'products.general.from' | t }}</em></small>
        {% endif %}
          {% if product.price_min > 0 %}
            <span class="money">{{ product.price_min | money }}</span>
          {% else %}
            {{ settings.free_price_text }}
          {% endif %}
      {% else %}
        <span class="sold_out">UH OH, WE’RE OUT</span>
      {% endif %}
      {% if product.compare_at_price_max > product.price %}
        <span class="was_price">
          <span class="money">{{ product.compare_at_price_max | money }}</span>
        </span>
      {% endif %}
    </span>
  {% endif %}
  {% if settings.enable_shopify_collection_badges and settings.enable_shopify_review_comments %}
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
  {% endif %}
</div>

{%if settings.display_vendor%}
{{product.vendor}}
{%endif%}
{{product.title}}
{%如果集合_句柄包含“即将到来”%}
{{'集合.将军.马上就来{t}
{%else%}
{%if product.available%}
{如果product.price_变化且product.price_min>0%}
{{'乘积.一般.来自{t}
{%endif%}
{如果product.price_min>0%，则为%0}
{{product.price{u min}money}
{%else%}
{{settings.free_price_text}
{%endif%}
{%else%}
哦，我们出去了
{%endif%}
{%if product.compare_at_price_max>product.price%}
{{product.compare_at_price_max|money}
{%endif%}
{%endif%}
{%if settings.enable_shopify_collection_徽章和设置。enable_shopify_review_comments%}
{%endif%}

---

非常感谢您的帮助。

您可能需要在

产品包装

div中添加一个类

售罄

（或任何内容），以便能够为您的图像设置样式感谢您的评论@t3\rry我发布生成的html代码是错误的，现在我将原始代码放入。我需要应用一个函数，该函数表示当产品的价格售罄时，不透明度应用于拇指。这有意义吗？如果没有

product.available

，您似乎会显示售罄消息，那么为什么不在没有

product.available

的情况下为您的产品添加一个类呢