My store URL is https://scent26candleco.co.uk/
How do I change the colour of the sale badge on the collection and product page so that it the background colour is OB82C9 and not white? Thanks
Topic summary
A Shopify store owner wants to customize the sale badge on their Dawn theme collection and product pages, specifically changing the background color to #0B82C9 and making the text white instead of black.
Solution Provided:
- Add CSS code to the theme’s base.css, style.css, or theme.css file in the Assets folder
- The recommended code snippet:
.product-grid .badge, .badge.price__badge-sale {
background: #0B82C9;
color: white;
}
Troubleshooting:
When the initial code didn’t work, a syntax error was identified - the user had accidentally used a parenthesis instead of a curly bracket in their base.css file. The helper suggested:
- Correcting the bracket syntax error
- If the issue persists, trying the custom.css file from the theme editor instead
The discussion remains open as the user is working through the implementation.
1 Like
.card__badge .badge {
background:
add this in theme.css fileTry this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-grid .badge, .badge.price__badge-sale {
background: #0B82C9;
}
- And Save.
- Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
1 Like
Thanks - how do I get the word Sale to be white instead of black? I have not followed the previous step yet, as would prefer to add 1 piece of code versus 2!
Just add the color.
.product-grid .badge, .badge.price__badge-sale {
background: #0B82C9;
color: white;
}
And Save.
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
I added the code to base.css in Assets but nothing has changed - it still shows as black text and a white background. Any ideas where I am going wrong?
