Hi, Im having so much trouble trying to change my sold out button color or at least the text color, I did already add some coding in my base.css file for other parts of my website, like a background image. I’ve been watching youtube videos and reading the already posted discussions about this topic but all the extra codes that people recommend to change the sold out button colors does absolutely nothing and I’m thinking it’s because I already have a code that might over power this new code. If anyone can please help me that will be so amazing.
Topic summary
Main issue: Changing the “Sold out” badge color in a Shopify theme. The user’s prior CSS edits may be overriding new styles.
Context and attempts:
- The request targets the sold out badge (not the add-to-cart button). Screenshots were provided; preview links shared (one expired, then renewed). The affected product is “vintage ring box.” Attachments/screenshots are central to understanding placement and styling.
- Helper advised adding CSS in the theme’s CSS file (base.css/style.css/theme.css) to make the sold out badge background transparent using selectors for .badge.price__badge-sold-out.color-scheme-4 and a specific badge ID, first without, then with !important.
- User reports no visible change after both attempts. They suspect existing CSS for a fixed background image might be conflicting.
Considerations:
- Helper wants to ensure changes don’t affect the sale badge.
- The CSS selectors used include a specific section/template ID, which may be brittle or mismatched across templates/sections.
Status and next steps:
- Unresolved; discussion ongoing. The user shared a new preview link for further review.
- Action item: Helper to inspect the live preview and adjust selectors/specificity to target the sold out badge without impacting the sale badge.
1 Like
Do you mean solde out badge? Would you mind to share your store URL? Thanks!
@Made4uo-Ribe I added screen shots because I haven’t launched my website yet, but yes the sold out badge!
You can share the preview. I just like make sure if we change the sold out badge the sale badge wont be affected.
@Made4uo-Ribe how do I share a preview?
When you preview the theme, you can see this buttons below.
Click the share preview and it will you URL to copy.
Thanks for the info, check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
span.badge.price__badge-sold-out.color-scheme-4,span#Badge-template--22238068638005__featured-collection-9338951729461 {
background: transparent;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi thank you, I tried but nothing has changed, I dont know why
@Made4uo-Ribe Are you still able to help me?
Replace this this.
span.badge.price__badge-sold-out.color-scheme-4, span#Badge-template--22238068638005__featured-collection-9338951729461 {
background: transparent !important;
}
And Save.
just tried and still no change, It saved properly and I choose to preview it but its still totally dark. I don’t know if its because of the coding I used to lock the wallpaper as the background. I think that coding needs to be revised, are you able to help me further?
Can you share previoew again? the preview already expired. Thanks!
https://bz8srtt7ymqttbxo-86519415093.shopifypreview.com
the ‘vintage ring box’ is where it has the sold out badge