Product Sold Out Graphic Over Featured Product Image

This will add a graphic over top the featured product image if product is not available. Example liquid file setup below.

__product-image.liquid

{% if product-loop.available %}
     {% assign image = product-loop.featured_image.src | product_img_url: 'grande' | img_tag: product-loop.featured_image.alt | link_to: product_url %}
     {{ image }}
{% else %}
     <a href="{{ product_url }}">
     <img style="position: absolute;" src="{{ 'Neon-bundle-_SOLDOUT.png' | asset_img_url: 'grande' }}" alt="{{ product-loop.featured_image.alt }} - SOLDOUT">
     <img src="{{ product-loop.featured_image.src | img_url: 'grande' }}" alt="{{ product-loop.featured_image.alt }}">
     </a>
{% endif %}

{% if product.available %}
     {{ image }}
{% else %}
     <style>.thumbnail.product-main-image{pointer-events: none;}</style>
     {{ image }}
     <img style="position: absolute;top: 0;" src="{{ 'Neon-bundle-_SOLDOUT.png' | asset_img_url: 'grande' }}" alt="{{ product.featured_image.alt }} - SOLDOUT">
{% endif %}

*Note* pointer event is to remove the image rollover zoom effect.

product-item.liquid

{%- if product.available -%}
     {%- if product.compare_at_price > product.price -%}
          <span class="ProductItem__Label Heading Text--subdued">SALE</span>
     {%- endif -%}
{%- else -%}
     <img style="position: absolute;top: 0;" src="{{ 'Neon-bundle-_SOLDOUT.png' | asset_img_url: 'grande' }}" alt="{{ product.featured_image.alt }} - SOLDOUT">
{%- endif -%}