Change promotion badge color in RIDE theme

Store Design
,
1 
Can someone help me? I need to change the color of the promotion badge to red, but in the RIDE theme,

when I change it in the settings, it also changes the entire background. Is there any way to change the color directly in the source code? Could someone help me to find the place in the code where I can insert the color only in the stamp via hexadecimal?

I am very grateful!

![tag sale white.JPG|631x510](upload://9XCG6Xcix87571pqNpiJXMj0nYi.jpeg)



![tag sale red.JPG|652x512](upload://k6PeVWGXvp8LFgCpb3pZ0IHBfe9.jpeg)
1 Like
2

Hi @Marcielgm ,

Could you please share your store URL, so that I can help you

3

Hi @Marcielgm

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

My store: https://fac6ba-2.myshopify.com/
Password: 12060425

1 Like
5

Hi @Marcielgm ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

  1. Go to Online Store → Theme → Edit code.
  2. Open your assets/base.css theme file.
  3. Add the code at the end of the file:
.card__badge.top.right>span {
    background: red;
}

Beae_Anthony_0-1692895834211.png
Beae_Anthony_0-1692895834211.png1592Ă—452 483 KB

Best regards,

Anthony

6

Thank you for the information. Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • 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:
.badge {
    background: red;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

I made the changes, but only on the collection but on the product page it didn’t change, I also need to change the text color of the seal to white. It’s possible?

page product.JPG
page product.JPG1106Ă—492 63.2 KB

collection page.JPG
collection page.JPG804Ă—462 42.6 KB

8

Hi @Marcielgm ,

You can add this code below to assets/section-main-product.css:

span.badge.price__badge-sale.color-inverse {
    background: red;
    color: white;
}

Beae_Anthony_0-1692903771933.png
Beae_Anthony_0-1692903771933.png618Ă—345 18.2 KB

To change text of badge to white on collection, add this code to base.css:

.card__badge.top.right>span {
    color: white;
}
1 Like
9

Hi Beae_Anthony!
I do and solution. Thanks so much!!!