A user wants to customize the Sale and Sold Out badge colors on product cards in the Craft theme, noting that the current grey-on-grey sale badges are difficult to see.
Solution provided:
Additional resources:
The user had previously attempted CSS edits from other discussions without success, but the built-in theme customization options appear to be the recommended approach for Shopify’s native themes.
I would like to change the colours of the Sale and Sold Out buttons on the product cards so that they’re different. (the sale colours are currently grey on grey which is easy to miss)
I’ve tried a couple of css edits from other discussions about similar issues but they didn’t work. Can anyone let me know what code to enter and customise and which asset file to put it in?
It sounds like you want to modify the product card sale badges on the collection page? If you’re using one of the Shopify built themes then:
You can change the badge color here: Theme Editor → Settings → Badges → Sale badge color scheme/Sold out badge color scheme → change
FYI, you can also change the badge position here: Theme Editor → Settings → Badges → Position on cards
If you prefer to follow along visually, you can check out this video around the 01:55 mark (change badge position) and 02:30 mark (change badge color).
