Adding Opacity For Sold Out Items On Product List

Shopify Discussion
1

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)

Screenshot_1.png
Screenshot_1.png388×568 53.3 KB

2

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


    
    {% if product.available %}
        {% unless product.available %}
            
Sold Out

        {% endunless %}
    {% else %}
        
    {% endif %}


.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;
}
3

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