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

l1kim · ‎03-28-2024

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

Dan-From-Ryviu · ‎03-31-2024

Please update the code

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- 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

AnneLuo · ‎03-28-2024

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 Email Me

Buy Me A Coffee ☕

Dan-From-Ryviu · ‎03-28-2024

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>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

l1kim · ‎03-31-2024

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,

Dan-From-Ryviu · ‎03-31-2024

Please update the code

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

l1kim · ‎04-02-2024

Wow, great! Thank you so much!

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

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

Buy Me A Coffee ☕

Community Blog Articles