Hi there, this is yet another ‘help me change the color of the sold out button’ thread! I haven’t been able to find any solutions specific to the Colorblock Theme, and I’ve tried loads of suggestions for other themes and none have worked.
Can someone help me with a code insert for changing the color of the button? The sold out button is located on both (a) the product collection page; and (b) individual product page (when a product is sold out).
Under the Colorblock Theme the button is electric blue/white text by default. Ideally I’d like code that allows for custom HTML colors so that I can change colors over time (and this will also be more useful to other users who have the same problem).
Thanks very much.
Hi @leigh-lush
Do you want to change button Out of stock like this?
Hi, thank you for your swift reply. This is not the button I am after sorry, the one you pictured can be changed through the theme editor. The buttons I would like CSS help for cannot be changed in the theme editor without custom code. As I’m not a coder I’m reaching out for help! Your time is very much appreciated.
I’ve uploaded two pictures below that show the buttons I want to change: From left to right - (1) Product page (where an individual product is displayed) 2) Product catalog (where all products are displayed).
Hi there, thanks for your quick response. I’m not sure which CSS file you mean, the liquid theme? I can understand the steps, but I don’t know how to add rules for these. That’s why I’m after a quick code suggestion if at all possible. Thank you.
Oh that is product label Sold out
I checked on code then see they provide variable for those color, can you try to looking for on theme settings?
if can’t find the color in theme setting, let try this way to edit code:
Shopify admin → Sales channels → Online Store → Themes → click Customize your current theme.
Add custom css below as attachment:
.card__content .badge.color-inverse {
background: green;
color: white;
}
Thank you for your reply, I haven’t been able to find this in assets/ base.css or the liquid theme.
I have tried this code in both the catalog and product description pages through the editor, as you show in the picture above. It didn’t work unfortunately. I also tried with using HTML codes for the colors instead of the name of color and didn’t work.
It will be easier if you add me as collaborator then I can check on your store directly
Hi @leigh-lush
Would you mind sharing your store URL? You can also PM me if you’d prefer not to share it publicly. Thanks!
Hi @leigh-lush
Try 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:
.badge.color-scheme-3 {
background: red;
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi there, thanks so much for your time. Unfortunately this hasn’t worked for me. I’ve found base.css (there is no theme.css or style.css) and added to bottom. Screenshot below of what I did, can you see if there’s a problem in the way I implemented this?
Just to be clear, I pressed ‘save’ in the top right, it was greyed out at the time when I took this screenshot.
Add 1 closing bracket on the line before .badge code }
Like this image below.
And Save.
Then don’t forget to refresh the preview so you can see the exact result. Thanks!
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
That did the trick. THANK YOU so much!
EDIT: A couple of extra points for those reading who have the same problem:
- It’s possible to change the background color of the button using the preset colors. In the accepted solution delete ‘red’ and start typing the color you want. It should come up with some suggested colors - pick one then save/preview to see if it’s a good match for your store. So although I wasn’t able to get a HTML code for the exact color I wanted, it was close enough!
- The same problem also exists with the ‘Sale’ button in the Colorblock theme. The setting for this one could not be found.
