Re: Center label "out of stock"

Solved

How can I center the 'out of stock' label on product pages?

Marco211
Explorer
95 0 21

Good morning, do you happen to know how to center the "out of stock" label, in order to put everything centered for the products? Thanks a lot to everyone

 

https://refade-8966.myshopify.com/

password: refade

Accepted Solutions (2)
Moeed
Shopify Partner
7693 2069 2550

This is an accepted solution.

Hey @Marco211 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__badge {
    width: 100% !important;
    text-align: center !important;
}
</style>

RESULT:

Moeed_0-1699615269127.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Dan-From-Ryviu
Shopify Partner
11942 2340 2516

This is an accepted solution.

Add this code at the bottom of your base.css file. 

.card__content .card__badge {
justify-self: center !important;
}

Screenshot_1.jpg

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
11942 2340 2516

Hi @Marco211 

Do you mean center this badge? Screenshot_5.jpg

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Marco211
Explorer
95 0 21

Yes exactly

Moeed
Shopify Partner
7693 2069 2550

This is an accepted solution.

Hey @Marco211 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__badge {
    width: 100% !important;
    text-align: center !important;
}
</style>

RESULT:

Moeed_0-1699615269127.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Dan-From-Ryviu
Shopify Partner
11942 2340 2516

This is an accepted solution.

Add this code at the bottom of your base.css file. 

.card__content .card__badge {
justify-self: center !important;
}

Screenshot_1.jpg

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.