I made an update to the colors in my store creativeblueprintbrand.com and now all of the sold out tags on my collection and product pages are blue instead of black, but I didn’t change it intentionally. I want the sold out tab to be black, but when I try to change it by changing the color scheme, nothing changes. I have also tried various code changes. Is there a way to do this?
Topic summary
Unexpected color change: After updating store colors, the “Sold out” badges on collection and product pages turned blue. Attempts to revert via theme color settings and various code edits did not affect the badge color.
Proposed fix: In Shopify Admin > Edit theme > Theme settings > Custom CSS, add a rule targeting the badge to force a black background: .product-card-wrapper .badge.color-inverse { --color-badge-background: 0 0 0; } This leverages the theme’s CSS variable for badge background.
Evidence/updates: One participant shared a screenshot indicating the sold-out badges now appear black on their end, suggesting the fix worked or that the issue may be cache/device-specific. Another image highlights where to add Custom CSS in Theme settings.
Status: Potentially resolved, but confirmation from the original poster is pending. No broader theme bug identified; solution is localized CSS override. Unanswered question: whether the change propagates consistently across all pages and devices without further adjustments.
Hi @creativebp8 ,
From the Shopify Admin click on Edit theme, then on the left sidebar click on Theme Settings
And look for Custom CSS, in there paste the following snippet
.product-card-wrapper .badge.color-inverse {
--color-badge-background: 0 0 0;
}
This happens because the “Sold out” badge isn’t controlled by color schemes — it’s tied to a global CSS class or variable that changed when you updated your brand colors.
Quick fix (recommended):
Add a direct CSS override so it stays black:
.badge--sold-out,
.product__badge--sold-out {
background-color: #000 !important;
color: #fff !important;
}
Add this to the bottom of base.css or your theme’s Custom CSS.
Pro tip:
Always inspect the element first — badges often inherit accent colors, not scheme settings.
If you share your theme name, I can point you to the exact file.
You can edit the color scheme of the sold-out badge from your store admin > Sales channels > Online Store > Themes > Customize > Theme settings > Badges.
Best regards,
Dan from Ryviu: Product Reviews App
I found that it’s already black background.
Have you already manage to fix it?