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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024