Solved

Adding Opacity For Sold Out Items On Product List

WilliamMFH
Visitor
2 0 0

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

Accepted Solution (1)

CodingSolution
Trailblazer
176 12 10

This is an 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;
}
banned

View solution in original post

Replies 2 (2)

CodingSolution
Trailblazer
176 12 10

This is an 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;
}
banned
WilliamMFH
Visitor
2 0 0

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