Change sold out button and text colour? Refresh Theme

Shopify Discussion
1

Hi guys,

I’ve tried several other solutions for this in this forum and elsewhere online but nothing has worked unfortunately.

I’m trying to change the sold out button and text colour, text to white and the button to red. It would need to be consistent across the homepage “featured collection” and the “product grid”.

My website is gchem.co.uk

If somebody could help it would be very much appreciated.

Alex

2

Hi @gchemuk

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.card__badge.bottom.left .badge {
    background: red;
    padding: .6rem 1rem;
    color: white;   
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Thanks alot!!

4

Sorry but I’ve realised that now both the sold out and sale badges are the same. Is there a way of having an individual colour for each?

5

Would you mind to provide the URL/products with sale badge?

6

The super sample wash kitt, it’s red with bleepe text in the shop all section but within the product it’s red with blue text. The sold out badge is also still white with blue text within the product pages.

7

PLease, replace the code wit this one. And add your desired color.

/* sold-out badge */
.badge.badge--bottom-left.color-background-1 {
    color: black;
    background: blue;
    padding: .6rem 1rem;
}
/* sale badge */
.badge.badge--bottom-left.color-background-2 {
   color: white;
    background: red;
     padding: .6rem 1rem; 
}

And Save,.

Result:

Made4uoRibe_0-1721679724007.png
Made4uoRibe_0-1721679724007.png1753×726 162 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

You are talking about the product page? The product page have different code not same on the collections.

This is for the product page.

span.badge.price__badge-sale.color-background-2 {
 color: white;
 background: red;
 padding: .6rem 1rem;
}
span.badge.price__badge-sold-out.color-background-1 {
  color: black;
  background: blue;
  padding: .6rem 1rem;
}

AndSave.

The sale is background-2 and sold-out is background-1.

Made4uoRibe_1-1721680016010.png
Made4uoRibe_1-1721680016010.png602×325 14.1 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

9

Thank you so much! :raising_hands: