Solved

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

Ryanp
Excursionist
42 1 18

[[ 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

sold out product page.jpgsold out collection page.jpg

 

keywords: custom, sold out, badge

Accepted Solutions (2)
SomeUsernameHe
Shopify Partner
450 49 81

This is an 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>
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

SomeUsernameHe
Shopify Partner
450 49 81

This is an accepted solution.

Do the same in card-product.liquid

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

View solution in original post

Replies 13 (13)

SomeUsernameHe
Shopify Partner
450 49 81

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

7a7a284f1456c98f45fd69b7a8e68704.png

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Ryanp
Excursionist
42 1 18

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
Shopify Partner
450 49 81

This is an 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>
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Ryanp
Excursionist
42 1 18

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.. 

 

sold out product page.jpg

SomeUsernameHe
Shopify Partner
450 49 81

This is an accepted solution.

Do the same in card-product.liquid

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
SomeUsernameHe
Shopify Partner
450 49 81

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

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Ryanp
Excursionist
42 1 18

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
Shopify Partner
450 49 81

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. 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

ThePrimeWeb
Shopify Partner
1045 271 213

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"

ThePrimeWeb_0-1706465734729.png

 

 

Then, click on the "Products" tab

ThePrimeWeb_1-1706465734715.png

 


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

ThePrimeWeb_2-1706465734962.png

 

 

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 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
Ryanp
Excursionist
42 1 18

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.. 

 

sold out product page.jpg

ThePrimeWeb
Shopify Partner
1045 271 213

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');
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
Ryanp
Excursionist
42 1 18

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

ThePrimeWeb
Shopify Partner
1045 271 213

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.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here