Adding Opacity For Sold Out Items On Product List

[WilliamMFH]

Instead of just sold out written on the lower part of the image under home or collection tab, I want it to be darken like the image with white sold out written on the middle of the image whenever its sold out. Please does anyone can help me with this problem. Im using dawn theme btw, thanks !!! :)) 

My Store (f13535-2.myshopify.com)

[CodingSolution · Accepted solution]

Here's an example of how you could structure the code:

<div class="product-image-wrapper">
    <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.featured_image.alt }}" class="product-image">
    {% if product.available %}
        {% unless product.available %}
            <div class="sold-out-overlay">Sold Out</div>
        {% endunless %}
    {% else %}
        <!-- Handle sold out condition for variants if needed -->
    {% endif %}
</div>

.product-image-wrapper {
    position: relative;
    display: inline-block; /* or block depending on your design */
}

.sold-out-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    font-size: 18px;
    z-index: 1;
}

[WilliamMFH]

On which coding tab i should paste this code sir?? Im sorry for my incompetence but im kinda new to this hehe 😄