Change sale badge colour on product card Dawn 15 V

[ctal37]

hiiii

I would like to change the colour of sale badge that is on product card in homepage. please check screenshot

store url: https://5a3cf5-fc.myshopify.com/

[dws_pvt_ltd]

Hello @ctal37 , Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open base.css" OR “theme.css”.
6. Add the following code at the end of the file.

.card__content .card__badge .badge {
    background: red;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[ctal37]

hey @dws_pvt_ltd it is not working

[Rahul_dhiman]

Hello @ctal37
Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

.badge {
background-color: crimson !important;
color: white !important;
}

Result

If this was helpful, hit the like button and accept the solution.
Thanks

[dws_pvt_ltd]

See its working,

[dws_pvt_ltd]

Hello @ctal37 , It can change with theme settings.

Go to Online store → Open Theme Customisation → Open theme settings in left side with settings logo.

add your color scheme of the badges that you want.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[ctal37]

@Rahul_dhiman this code is changing colour of both the badges and I just want to change the colour of ( sold out ) one also want to decrease the size of this badge. please help

[dws_pvt_ltd]

Check my last answer of theme settings, there you can customise different for both badges with different color.

[ctal37]

hey @dws_pvt_ltd idk but that is also not working please help

[dws_pvt_ltd]

See it perfectly works in the theme settings of the theme customisation,

[dws_pvt_ltd]

Hello @ctal37 , Remove all custom CSS which you added for this and Try in this way with theme settings.

[Rahul_dhiman]

Go to online store ----> themes ----> actions ----> edit code---->base.css
add this code at the end of the file.

span#NoMediaStandardBadge-template--17181254746297__featured_collection_bYbp6n-7945386721465 {
background: red !important;
line-height: 0.5;
width: 80px !important;
}

result

Thanks