Solved

Change sale badge color on collections page

toubaby
Excursionist
31 0 7

How to change the sale badge color on the collections page, like this one https://toubaby.com/collections/shoes/Shoes ? Many many thanks!

Accepted Solution (1)
KetanKumar
Shopify Partner
36890 3640 11984

This is an accepted solution.

@toubaby 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

span.badge.badge--bottom-left.color-accent-2 {
    background: red;
    border-color: red !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 11 (11)

Heekman01
Excursionist
14 1 3

Hello, I see you wanted to have sale badge to Blue color as the reference website you showed. This is very simple and straight forward. All you need to do is to go to your shopify theme customization and click on collection, so you will see where  to select products row and colum, so you will see color badge color below. But what theme are you using? Just try out that and let me know if you get that right.

heekman
toubaby
Excursionist
31 0 7

Thank you very much, Heekman. That's my website... I want to change the sale badge color to red but can't. Is the default theme the Debut one?

Heekman01
Excursionist
14 1 3

Okay good, Can i have the whole store URL to know the exact theme you use? but irrespective of any theme i can perfectly help you change it to your desired color ( red). 

 

you can reach out to me via this link for better to get it done now

 

https://bit.ly/3gF8Txo

heekman
toubaby
Excursionist
31 0 7

https://toubaby.com Thank you, Heekman!

KetanKumar
Shopify Partner
36890 3640 11984

@toubaby 

like this?

KetanKumar_0-1641525909090.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
toubaby
Excursionist
31 0 7

Thank you, Ketan! How did you change the color? I'm still seeing the blue color here... The picture that you showed me is what I want. Can you please show me how to do it? Thank you very much!

KetanKumar
Shopify Partner
36890 3640 11984

This is an accepted solution.

@toubaby 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

span.badge.badge--bottom-left.color-accent-2 {
    background: red;
    border-color: red !important;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
toubaby
Excursionist
31 0 7

Thank you indeed, Ketan! That works so perfectly and I really appreciate it.

KetanKumar
Shopify Partner
36890 3640 11984

@toubaby 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
chelux
Excursionist
40 1 8

Would like to change the color of sale badge on collection page for Origin theme — this code doesn’t seem to work for it. Would you happen to know of a code that will work for this theme? Thank you

KetanKumar
Shopify Partner
36890 3640 11984

@chelux 

oh sorry for that issue can you please share store url so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing