How to modify the Sale badge color in Featured Product?

Store Design
,

Topic summary

Goal: change the blue “Sale” badge color in the Featured Product section to red.

  • Initial approach: A CSS snippet targeting .card__content .card__badge span in base.css was suggested but had no effect.

  • Alternative suggestion: Use the theme customizer to adjust the badge color or create a new color scheme to avoid impacting other sections; a screenshot of the editor was shared for guidance.

  • Correction and resolution: Updating the CSS selector to .card__content .card__badge .badge with background-color: red !important; in base.css successfully changed the badge color.

  • Path used: Online Store > Themes > Edit code > base.css, then add the corrected CSS.

Outcome: Issue resolved with the corrected CSS selector. No further action needed. The theme editor option remains an alternative, but the working fix was CSS-based.

Summarized with AI on January 2. AI used: gpt-5.
1

I want to change background color of the “Sale” badge in Featured Product to Red. Currently it’s blue.

1 Like
2

Hey @storetool

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello @storetool

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.card__content .card__badge span {
   background-color: red !important;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

4

Thank you, but it’s not working. I used your code, but nothing changed.

5

Hi @storetool

It must have an option to change color of that badge when you choose that section in your theme customize but I recommend you create a new color scheme for it and edit color so the color wont affect to other sections.

Screenshot 2024-03-25 at 16.23.30.png
Screenshot 2024-03-25 at 16.23.30.png1926×1039 211 KB

6

This is not where I need to edit. I want to edit the Featured Product section on the Homepage.

1 Like
7

Hello @storetool

I apologize, I made a small mistake. The code below should work fine.

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

.card__content .card__badge .badge {
   background-color: red !important;
}
1 Like
8

Yes, my image is about featured product section on homepage

1 Like
9

I will try, thank you

10

It’s working, thank you