Solved

How to change SOLD OUT appearance in Prestige Theme

rodriiiv1
Visitor
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)

Kinjaldavra
Shopify Partner
2302 570 1423

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

 

View solution in original post

Replies 4 (4)

dmwwebartisan
Shopify Partner
12291 2547 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Zworthkey
Shopify Partner
5581 642 1569

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 570 1423

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

 

rodriiiv1
Visitor
2 0 1

Thank you very much!