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

calibre65 · ‎11-28-2023

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!

Dan-From-Ryviu · ‎11-28-2023

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.

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Bilash · ‎11-28-2023

send url of the store

calibre65 · ‎11-28-2023

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 · ‎11-28-2023

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.

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

calibre65 · ‎11-28-2023

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 · ‎11-28-2023

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?

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

calibre65 · ‎11-28-2023

Here's the page with the badge:

https://calibre65.com/collections/all-watches?filter.v.availability=0&sort_by=created-descending

Dan-From-Ryviu · ‎11-28-2023

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

calibre65 · ‎11-28-2023

This works perfectly, thank you!

Dan-From-Ryviu · ‎11-28-2023

You are very welcome

Regards,

Dan

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

HELDERWRLD · ‎03-09-2024

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:

Dan-From-Ryviu · ‎03-10-2024

Hi @HELDERWRLD

Do you mean you want to change it on the product page and display it like this?

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

HELDERWRLD · ‎03-11-2024

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

HELDERWRLD · ‎09-16-2024

Hello @Dan-From-Ryviu

Can you please share the code that you used to place the badge like that please?

clavilla57 · ‎07-12-2024

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.

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

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

Community Blog Articles