How can I alter the sale badge and price color on my website?

Store Design
1

I tried to change the “sale” badge background color and price color. And didn’t find the file according to the previous Q&A. My website is toubaby.com . Many thanks for helping out!

2

Hi @toubaby

To change the “sale” badge background color and price color, add this code to your base.css file.

Navigate to online store >> Click edit theme code.

Now find base.css and paste the following code

.price__badge-sale{background: green !important;}
.price-item--sale{color: green !important;}

Change the color according to your preferences.

After adding the CSS you see the changes.

Screenshot_10.png
Screenshot_10.png527×517 19.9 KB

I hope it will be helpful for you.

Thanks

Did it solve your issue?

- If yes, Like & Mark As Solution to help the community

- If not, let me know. also share a screenshot of the code that you added.

1 Like
3

Thank you indeed, Marvic! That works perfectly on the product page. How about the collection page: https://toubaby.com/collections/shoes/Shoes How to change the sale badge color on this page? Many many thanks!