How to change the text of just the "Sold Out" badge - not the button - Dawn Theme 2024

[Ryanp]

[[ BEFORE ANSWERING: This is not done through the "edit default language" screen. That changes both the button and badge. I need just the badge changed.. thanks! ]]]

Cannot find this anywhere!!!  Been through all my en.json and theme liquid..  I just want to change the text on ONLY the Sold Out Badge - not the buttons..  Need this for homepage, collection, product page, etc..  Any help would be greatly appreciated - searching for a solution has led me NO where! 

I do have some custom code for the colors and font weight so I want to keep those for my buttons! I would love custom code for just the badges including size, color and text..  hey maybe even change the whole thing to an image would be awesome!  Thanks! 

See images attached

keywords: custom, sold out, badge

[SomeUsernameHe · Accepted solution]

They are both tied to the same variable so you would need to directly change the code for this to happen.

Go to your theme files, search for "price.liquid". On around line 169 you should see:

<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>

Here you can place whatever you want. In your case, this would be the code you would use:

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      SOLD OUT
    </span>

[SomeUsernameHe]

In your Online Store > Theme Page click on "..." and click "Edit default theme content"

[Ryanp]

Thanks but that changes both the Badge and the Button to the same thing.. I need to change just the badge as show in the photos attached to Original question. 

[SomeUsernameHe · Accepted solution]

They are both tied to the same variable so you would need to directly change the code for this to happen.

Go to your theme files, search for "price.liquid". On around line 169 you should see:

<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>

Here you can place whatever you want. In your case, this would be the code you would use:

    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      SOLD OUT
    </span>

[Ryanp]

Okay thanks - that worked for the product page but not on the collections page or home page..  any idea how to make it work SITE WIDE.. 

[SomeUsernameHe · Accepted solution]

Do the same in card-product.liquid

[SomeUsernameHe]

around lines 293 and 297 of card-product.liquid, you can change both places if you choose. 

[Ryanp]

Excellent - thank you for your help - both suggestions worked amazing!  Hey for giggles - do you know of any tutorials to change the badge to an image?  

[SomeUsernameHe]

Well, I should ask, which theme are you using? Sorry scratch that, I didn't see the end of the post title. My apologies. My code above should work for you then. 

[ThePrimeWeb]

You should be able to do this without any code change. 
In your Online Store > Theme Page click on "..." and click "Edit default theme content"

Then, click on the "Products" tab

Finally, look for the "Sold Out" Textbox and replace the text with "SOLD OUT"

After you hit save, the changes should be reflected, You can come back here and change it back if you'd like to, and change other text as well 

[Ryanp]

thanks but this more complex - I do have a solution working now above but still not for the collection pages or homepage.. only works on product page.. 

[ThePrimeWeb]

Oh I see, 

Then editing the code would be the best case scenario. In the case of changing the button to an image, you could use

If you can give me the link for the image I can give you the full code.

.price__badge-sold-out {
    background-image: url('www.urltoimage.com');
}

[Ryanp]

thanks.. I can handle the URL but is this code going in base.css? or..?

[ThePrimeWeb]

Yeah you can leave it in base.css. Maybe add an !important at the end if it's not working. Also, you may need to check things like background-size, object-fit. I'm not sure. But apply it and see if it works, I will help you fine tune it from there.