I want to edit the design of the sold out badge that appears on the product card in a collection page. Instead of grey and stating “sold out”, I want it to be red, in bigger size and text changed to “Request to source”.
Also, on the product page, instead of the badge (beside the price) and button stating “sold out”, I want both to state “Sold out. Request to source”."
I can’t seem to find where in the codes to make the required text and design changes. And when found, what is the code I should use to make the changes? Anyone able to help? I am using Habitat theme. Thank you!
Hi, my store url is https://calibre65.com/
I managed to find the places to change the text from “Sold out” to “Request to source”, but I can’t seem to figure out how to change the design of the badge to red and in bigger size
You can change text of Sold out in Online store > Themes > Edit default theme content. Find Sold out but it will be applied to both product an product card page.
So you can go to your Online store > Themes > Edit code > open card-product.liquid, go to line 128, replace this line of code
{{- 'products.product.sold_out' | t -}}
With Request to source text.
1 Like
Thank you! This is definitely the more elegant solution compared to what I did which was to edit directly on the code.
How would I edit the design of the badge color and size though?
You need to add custom CSS code to do that. Could you send me a list page that has that badge so I can provide the code?
Hi @calibre65
Please add this code to your theme.liquid file, after tag
This works perfectly, thank you!
Hello Dan,
Can you also help me?
I would like to change how the Sold Out looks on my website: https://diversusoficialsite.myshopify.com/collections/mens-ready-to-wear
I will show you an example:
Hi @HELDERWRLD
Do you mean you want to change it on the product page and display it like this?
Hello @Dan-From-Ryviu
Yes, on the product page and on the collection page. But i don’t want the circle on it, just “Sold Out” letters.
And also when the product or variant is out of stock, appear like “GET NOTIFIED”, so people can put their email to join a waitlist. Like the example bellow
I would like to do it with my site also, would you please help me?
www.danicoffeeshop.com
tried the code shared, but doesn’t work on my.
Hello @Dan-From-Ryviu
Can you please share the code that you used to place the badge like that please?
