How to change SOLD OUT appearance in Prestige Theme

Store Design
1

How can I change the appearance of sold out products in the collection / home page from the small badge on the top corner as you can see in the attached image?

My website URL is twistedfriends.com

SOLD-OUT-LOOK-PRESTIGE.png
SOLD-OUT-LOOK-PRESTIGE.png1900×1400 180 KB

1 Like
2

@rodriiiv1

Please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.

.template-index .ProductItem__LabelList {
    position: absolute;
    top: 50% !important;
    text-align: center;
    left: 38% !important;
}

Thanks!

1 Like
3

Hii, @rodriiiv1
Paste this code on top of the theme.scss file.

.ProductItem__LabelList {
    position: absolute;
    left: 35% !important;
    top: 40% !important;
    text-align: left;
}

Thank You.

1 Like
4

hello @rodriiiv1

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-index .ProductItem__LabelList {
    position: absolute;
    left: 50% !important;
    top: 50% !important;
    text-align: left;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
3 Likes
5

Thank you very much!