Hide discount badge when product is sold out

sebashobo · ‎01-22-2024

Hi all,

I was wondering if you could maybe help me out with something.

We are using the Prestige theme and we are very happy with it. One thing that is bothering us, is the on the sale collection page when an item goes out of stock it shows both labels. We don't like the way this looks and is a bit confusing towards our customers.

I have tried somethings with coding, but I can't get it to work.

What we want to see is that when a product goes out of stock it will only show the back soon label and not show the discount label anymore.

Is there someone who can help us out with this? 🤗

Dan-From-Ryviu · ‎01-22-2024

Hi @sebashobo

Go to Online store > Themes > Edit cod > open theme.liquid file, add this code under <head> element

<style>
.product-card__figure:has(.badge--sold-out) on-sale-badge { display: none; }
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Moeed · ‎01-22-2024

Hey @sebashobo

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications

sebashobo · ‎01-22-2024

Hi Moeed,

Thanks for the quick reply!

Moeed · ‎01-22-2024

Hey @sebashobo

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if product.available %}
<style>
.badge--on-sale {
    display: block;
}
</style>
{% else %}
<style>
.badge--on-sale {
    display: none;
}
</style>
{% endif %}

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications

sebashobo · ‎01-22-2024

Hi,

This sadly didn't work. This did it the way around, so back soon was showing but the discount wasn't.

Below I got a reply with the working solution, thanks anyways!!

Dan-From-Ryviu · ‎01-22-2024

Hi @sebashobo

Go to Online store > Themes > Edit cod > open theme.liquid file, add this code under <head> element

<style>
.product-card__figure:has(.badge--sold-out) on-sale-badge { display: none; }
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

sebashobo · ‎01-22-2024

Great, thank you so much! It worked

Dan-From-Ryviu · ‎01-22-2024

Happy I could help

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Hide discount badge when product is sold out