Sale Badge on Product Image showing incorectly

Store Design

Topic summary

A user reported a sale badge appearing on product images without any visible text.

Another community member provided a CSS fix:

Solution steps:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Open the Assets folder and locate the CSS file (base.css, style.css, or theme.css)
  • Add the following CSS code at the bottom:
.card__badge.bottom span {
  color: #000 !important;
}
  • Save the changes

Result: The fix successfully resolved the issue, making the sale badge text visible again. The problem was confirmed solved by the original poster.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Does anyone have a fix for this - Sale badge showing but no text

2024-11-24 21.55.06.jpg
2024-11-24 21.55.06.jpg1685Ă—2247 1.26 MB

1 Like
2

Hi @Layts1000

PLease, share your store URL. Thanks!

3

Might help..thanks

https://solution-cornwall.com/collections/clearance-1

4

Thanks for the info, try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
.card__badge.bottom span {
    color: #000 !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

Bingo! Thank you it worked.