Solved

How to edit Sold Out badge design on product card, and also on the product page?

calibre65
New Member
12 0 0

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!

 

calibre65_0-1701156335907.pngcalibre65_1-1701156407457.png

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7523 1450 1449

This is an accepted solution.

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.

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 12 (12)

Bilash
Shopify Partner
25 2 1

send url of the store

 

calibre65
New Member
12 0 0

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 

Dan-From-Ryviu
Shopify Partner
7523 1450 1449

This is an accepted solution.

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.

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

calibre65
New Member
12 0 0

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?

Dan-From-Ryviu
Shopify Partner
7523 1450 1449

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?

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7523 1450 1449

Hi @calibre65 

Please add this code to your theme.liquid file, after <head> tag

<style>
.product-featured-image .badge.out-of-stock {
    background: red;
    padding: 24px 12px;
    font-size: 16px;
}
</style>

Screenshot 2023-11-28 at 16.34.58.png

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

calibre65
New Member
12 0 0

This works perfectly, thank you!

Dan-From-Ryviu
Shopify Partner
7523 1450 1449
You are very welcome

Regards,

Dan

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

HELDERWRLD
Explorer
105 0 6

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:Screenshot 2024-03-09 at 12.51.02 PM.pngScreenshot 2024-03-09 at 12.50.45 PM.png

Dan-From-Ryviu
Shopify Partner
7523 1450 1449

Hi @HELDERWRLD 

Do you mean you want to change it on the product page and display it like this? Screenshot 2024-03-11 at 10.31.37.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

HELDERWRLD
Explorer
105 0 6

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 bellowScreenshot 2024-03-11 at 4.10.48 AM.pngScreenshot 2024-03-11 at 4.12.22 AM.png