How to change SOLD OUT appearance in Prestige Theme

Solved
rodriiiv1
New Member
2 0 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

 

Accepted Solution (1)

Accepted Solutions
Kinjaldavra
Shopify Partner
2302 569 1408

This is an accepted solution.

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%);
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp

View solution in original post

Replies 4 (4)
dmwwebartisan
Shopify Partner
11154 2395 3435

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
Zworthkey
Shopify Partner
5581 642 1525

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.

Kinjaldavra
Shopify Partner
2302 569 1408

This is an accepted solution.

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%);
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
rodriiiv1
New Member
2 0 1

Thank you very much!