Changing the text color of the Sale button

Store Design

Topic summary

A user needed to change the Sale button text color to white (#FFFFFF) because it was invisible against the button’s background color.

Solution Provided:

  • Add CSS code to the top of component-card.css file
  • The code targets .badge--bottom-left.color-accent-2 with color: white !important;

Current Status:

  • The original poster confirmed the solution worked perfectly
  • A follow-up issue emerged: another user reports the CSS fix only applies to catalog and main pages, but not product pages
  • The product page implementation remains unresolved and requires additional guidance
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I was wondering if its possible to change the text color of the sale button. I would like to have mine changed to #FFFFFF.

Any help is greatly appreciated!

Thank you.

URL: https://glowee.nl/

2

Hii, @Dike
Can you give me a screenshot of your problem so,
I can solve it perfectly.
Thank You.

1 Like
3

@Dike
Paste this code on top of the component-card.css file.

span.badge.badge--bottom-left.color-accent-2 {
    color: white !important;
}

Thank You.

1 Like
4

Hello @Zworthkey

Thank you for your reply.

As you can see the button and the text are the same color, making it impossible to see the ‘‘Sale’’ text on the button.

Screen Shot 2021-11-09 at 13.29.56.png
Screen Shot 2021-11-09 at 13.29.56.png302×489 58.1 KB

If its possible to have the text changed to white, that would be amazing!

Thank you.

5

This worked perfectly! Thank you so much.

1 Like
6

@Dike
Kindly like our Solution if helpful

1 Like
7

Hello, I tried this but it only work in the catalog page and main page. It didn’t work on my product page. Please how do I go about it?