All things Shopify and commerce
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/
Solved! Go to the solution
This is an accepted solution.
See it perfectly works in the theme settings of the theme customisation,
This is an accepted solution.
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
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.
See its working,
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.
Hello @ctal37, Remove all custom CSS which you added for this and Try in this way with theme settings.
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
@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
Check my last answer of theme settings, there you can customise different for both badges with different color.
This is an accepted solution.
See it perfectly works in the theme settings of the theme customisation,
This is an accepted solution.
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024