How do I change the sold out to orange
Theme: Refresh
https://huggercomfort.com/products/hot-hugger-wearable-hot-water-bottle
Topic summary
A user wants to change the color of the “sold out” badge from red to orange on their Shopify store using the Refresh theme.
Two solutions were provided:
-
CSS file modification approach:
- Navigate to Online Store → Themes → Edit Code
- Open the
base.cssfile - Search for
.card__badge .badge - Modify the background color property to the desired orange shade
- Save changes and refresh the store
-
Theme.liquid injection approach:
- Go to Online Store → Theme → Edit code
- Open
theme.liquidfile - Add custom CSS code before the
</body>tag with the specific orange color value (#dda53c)
Both solutions target the badge styling through CSS customization. Screenshots were shared showing the implementation steps and expected results. The discussion appears resolved with actionable solutions provided.
Hi @Finn4 ,
Please follow the following steps
-
Go to your online store and select Themes from left panel
-
Press 3 dots menu in center (on the left of Customize button) and then Edit Code
-
Open the file base.css (you can search for it)
-
Search for the following: “.card__badge .badge” (without quotes)
-
In the properties for this selector you will see background color, change it to desired color
-
Save the changes, and refresh your store to see them in effect
After making that change, you will get desired result like this -
Thanks
Yash Garg
Hello @Finn4
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
