Move Sold Out Badge To Center in Debut Minimal Theme

Solved
Highlighted
Shopify Partner
4583 685 1442

@delusionjewelry 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.grid-view-item--sold-out dl.price.price--sold-out {
    position: absolute;
    top: 0;
    width: 60px;
    height: 60px;
    border: 1px solid;
    border-radius: 100%;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    padding: 10px;
    left: 0;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
2 Likes
Highlighted
Tourist
11 0 2

Screenshot_13.png

 

This code also moved my Vendor and Price, can you please assist? I would just like the SOLD OUT badge in the top left only. 

Thank you!

1 Like
Highlighted
Shopify Partner
4583 685 1442

@insideout_aus 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
11 0 2

https://inside-out-vintage.myshopify.com/

 

Thank you! Feel free to have a look around at the other code I've been playing with, might be a few conflicting.


0 Likes
Highlighted
Tourist
11 0 2

I would like to move the SALE and SOLD OUT badges to the same location if possible please

0 Likes
Highlighted
Shopify Partner
4583 685 1442

@insideout_aus 

Thanks for url 

sorry, but your store is password protect can you please share us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
11 0 2

Hey Ketan,

Apologies for that.

Password: Feesug1

0 Likes
Highlighted
Shopify Partner
4583 685 1442

@insideout_aus 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

span.price__badge {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    margin: 0;
    padding: 10px 6px !important;
    text-align: center !important;
}

.price__badges--listing .price__badge span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
11 0 2

Thank you brother! Managed to play around with! Appreciate your help!

Screenshot_16.pngScreenshot_15.png

0 Likes
Highlighted
Tourist
11 0 2

Damn, looked so good. Now this badge is showing on my product page?

Screenshot_18.png

 

Is it possible to just disable the product page if the item is sold out but keep the item on the collections page?

Thank you for any more help you can give. 

0 Likes