Topic summary
A user seeks to change the color of “sale” and “in stock” labels on their Shopify store. Multiple solutions are provided involving CSS customization:
Primary approach:
- Navigate to Online Store → Theme → Edit Code
- Locate the
base.cssortheme.cssfile (in the assets folder) - Add custom CSS code at the end of the file
CSS modifications offered:
- Change badge background color (examples include green:
background: green !important) - Adjust border radius, padding, and text color
- Modify font size for better visibility
Alternative method:
- Add CSS within
<style>tags in thetheme.liquidfile, placed above the</body>tag
All respondents provide code snippets targeting the .badge--on-sale class. Screenshots demonstrate the visual results of these customizations. The discussion remains technical and solution-focused, with contributors requesting feedback on whether their solutions were helpful.
- Here is the solution for you @Daniil_P13
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.badge--on-sale {
background: green !important;
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Hey @Daniil_P13
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi @Daniil_P13
- Go to Online Store → Theme → Edit code.
- Find the file assets/theme.css and paste the code below at the bottom of the file."
on-sale-badge.badge.badge--on-sale {
background: #d8cbc3;
color: black;
padding: 5px;
border-radius: 50px;
}
.badge--on-sale {
font-size: 8px !important;
}
Can you add more this code @Daniil_P13
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.