Make sold out badge transparent - Baseline Theme 3.2.1

Store Design
, , ,
1

Hello,

I would like to make the color of the “sold out” badge background transparent. When I remove the color and just make it transparent, it turns all black instead of all white. How can I do this?

dxxrek_0-1735630796590.png
dxxrek_0-1735630796590.png400×270 37.9 KB

2

Hi @dxxrek , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

websensepro_0-1735631795451.png
websensepro_0-1735631795451.png548×355 95.5 KB

Do you want the ‘Sold Out’ button like this?

4

Hey @dxxrek ,

To make the “sold out” badge background transparent while keeping the text readable, you can update the CSS. Here’s how to address the issue:

  1. Identify the class or ID for the badge: Locate the class or ID assigned to the “sold out” badge. For example, it might look like .badge-sold-out.

  2. Update the CSS: Add or edit the CSS for the badge to set the background to transparent and ensure the text color is clearly visible against your store’s background.

  3. Sample CSS:

.badge-sold-out {
    background-color: transparent !important; /* Make background transparent */
    color: #000000; /* Adjust text color as needed for readability */
    border: 1px solid #000000; /* Optional: Add a border to distinguish the badge */
}

Test the badge on different backgrounds to confirm it looks correct.

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[ Shopify Expert ]

5

Hello @dxxrek

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> base.bundle.css
add this code at the end of the file and save.

.pointer-events-none.absolute.z-10.bg-scheme-accent.p-2.text-scheme-background.top-2.right-2 {
background-color: transparent !important;
}

result

100.png
100.png373×418 81.5 KB

Thanks

6

Hi @dxxrek

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.relative > .pointer-events-none.absolute.z-10.bg-scheme-accent.p-2.text-scheme-background.top-2.right-2 {
    background: transparent !important;
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

7

Hello, my store url is velvet-labs.us

8

This worked! Thank you.

9

Happy to help you…!!!
Please hit a like button also, to the solution.