Shopify Sold Out Badge Blues? How to Customize That "Sold Out" Tab Color

Help! My Shopify "Sold Out" Badge Changed Color!

Ever made a small tweak to your Shopify store's color scheme and suddenly, *bam*, something unexpected happens? That's exactly what happened to creativebp8 over in the Shopify Community. They updated their store, creativeblueprintbrand.com, and the "sold out" badges turned blue instead of the desired black. Frustrating, right? Especially when you've tried changing the color scheme and even dabbled in code already!

Let's dive into the solutions the community offered and see how you can fix this, too.

The Mystery of the Misbehaving Badge

The first thing to understand is that sometimes, those little badges don't always play by the same rules as the rest of your theme. As Tech_prodigy1 pointed out, the "Sold out" badge color often isn’t controlled by the regular color schemes. It might be tied to a global CSS class or variable that gets affected when you update your overall brand colors. It's like a domino effect – you change one thing, and something seemingly unrelated changes, too.

Solution 1: Direct CSS Override

Tech_prodigy1 offered a super quick and effective fix: a direct CSS override. This is like telling the "sold out" badge, "No matter what, you *will* be black!" Here's the code snippet:

.badge--sold-out,
.product__badge--sold-out {
 background-color: #000 !important;
 color: #fff !important;
}

Here's how to implement this:

1. Go to your Shopify admin.
2. Navigate to Online Store > Themes.
3. Click Actions > Edit code.
4. Look for the base.css file (or a similar main CSS file for your theme). Alternatively, most themes have a Custom CSS section.
5. Paste the code snippet at the very bottom of the file or in the Custom CSS section.
6. Save the file.

The !important tag is key here. It forces the browser to prioritize this rule over any other conflicting styles. This should immediately turn your "sold out" badges black (with white text, as defined in the code).

Solution 2: Theme Settings (If Available)

Dan-From-Ryviu suggested another approach: checking your theme settings. Some themes have a built-in option to customize badge colors directly. You can usually find this under:

Store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Badges

However, as creativebp8 discovered, this isn't always the case. Sometimes the theme settings don't have the control you need, which is when CSS comes to the rescue.

Solution 3: Custom CSS via Theme Editor

StackingContext provided another CSS snippet, targeting a slightly different class. This is a great reminder that there's often more than one way to skin a cat (or, in this case, color a badge!):

.product-card-wrapper .badge.color-inverse {
 --color-badge-background: 0 0 0;
}

To use this:

1. From your Shopify admin, click Online Store, then Themes.
2. Click Customize.
3. Click the three dots in the upper right corner, then select Edit code.
4. Find the Custom CSS section (often at the bottom of the `theme.liquid` file or in a separate `custom.css` file).
5. Paste the code snippet.

Inspect Element: Your Best Friend

Tech_prodigy1 gave some solid gold advice: Always inspect the element first! Right-click on the "Sold out" badge in your browser and select "Inspect" (or "Inspect Element"). This will open your browser's developer tools, allowing you to see exactly which CSS rules are affecting the badge's appearance. This helps you pinpoint the specific classes you need to target with your CSS.

Wrapping Up

So, there you have it! A few different ways to tackle that rogue "sold out" badge color. Remember to start with the simplest solution (theme settings), and then move on to CSS overrides if needed. And don't forget the power of "Inspect Element" – it's like having a secret decoder ring for your website's styles. Hope this helps you get those badges back to the color you want!