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
Natztech
Shopify Partner
2236 565 1373

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
9822 2233 3070

@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 | Bag is a cart drawer that maximizes your sales. View app →
Zworthkey
Shopify Partner
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Natztech
Shopify Partner
2236 565 1373

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

rodriiiv1
New Member
2 0 1

Thank you very much!