Solved

How do I change the “Sold Out” text color and background color?

l1kim
Tourist
17 0 1

IMG_6901.jpeg


Can anyone help me change the text color to #232323 and background color of “Sold Out” on one of my products? (Craft Theme)


putonlovemarket.com

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7514 1450 1447

This is an accepted solution.

Please update the code 

<style>
.card__badge .badge,
.price--sold-out .price__badge-sold-out {
color: #232323 !important;
}
</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
176 39 46

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the component-price.css file and add the following code to it

.price__badge-sold-out {
   color: #23232 !important;
}

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me on luomingxia@shinetechsoftware.com.

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Hi @l1kim 

You can do that by adding this code to theme.liquid file after <head>. Change red with your color

<style>
.price--sold-out .price__badge-sold-out {
color: #232323;
background: red !important;
}
</style>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

l1kim
Tourist
17 0 1

It worked for the product page but not for the collection. Would you also have a code for collection as well?

Thank you a bunch,

 

Screenshot 2024-03-31 at 4.24.46 PM.pngScreenshot 2024-03-31 at 4.26.53 PM.png

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

This is an accepted solution.

Please update the code 

<style>
.card__badge .badge,
.price--sold-out .price__badge-sold-out {
color: #232323 !important;
}
</style>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

l1kim
Tourist
17 0 1

Wow, great! Thank you so much!