PRESTIGE Theme - Adding Sold Out overlay to products on collection feed

MorganR1
New Member
1 0 0

Hi guys, I've been looking everywhere for help on this subject and can't find anything for the Prestige theme to save my life. Currently, this theme has a tiny, unnoticeable "sold out" label above the top left of the product image like so: 

MorganR1_0-1624378881532.png

Its so small and honestly....dumb. I'm trying to do something like the following instead when a product is completely sold out so the customer can see right away that a product is no longer available: 

 

MorganR1_1-1624378984648.png

I've tried looking at app add-ons but none of them look good. I'm wanting something simple yet noticeable. Does anyone have a way to code this in?

This is my collection page URL where I would be needing the change: https://www.houseofzz.us/collections/sale

0 Likes
suyash1
Shopify Partner
3016 329 504

@MorganR1 - please add this css to the very end of the theme.scss file and check, it will look like screenshot below, it can be made center but then all labels like sale too will be in center.

.ProductItem__LabelList {left:0; width: 100%;}

.ProductItem__Label--soldOut {
    background-color: rgba(0,0,0,0.2);    width: 100%;    max-width: 100%; font-weight: bold;
    font-size: 18px;
}

 

suyash1_0-1624381728625.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes