Adding Opacity For Sold Out Items On Product List

Shopify Discussion
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;
}