Solved

Hide the Sale badge from product thumbnail

ADT77
Tourist
15 0 1

Hello,

I would need help, i'm trying to hide the Sale badge from the products thumbnail images. I'm using the Spotlight theme. Can someone please help? Please see the screenshot below. Thanks!

 

 

ADT77_0-1710612648093.png

 

Accepted Solutions (3)
ThePrimeWeb
Shopify Partner
1748 489 357

This is an accepted solution.

Hey @ADT77,

 

In the same theme.liquid file, add this at the bottom of the file ABOVE the </body> tag. You can delete the old code.

<script>
document.addEventListener('DOMContentLoaded', function () {
    try{
        let badges = document.querySelectorAll('.badge');
    
        badges.forEach(function(key, value){
            if(key.innerHTML === 'Sale') {
                key.style.display = 'None';
            }
        })
        
    } catch{}
});
</script>

 

Screenshot for reference.

ThePrimeWeb_0-1710616174834.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1748 489 357

This is an accepted solution.

Hey @ADT77,

 

Adding 'En vente' worked fine for me. Maybe give it about 5 minutes to apply (Maybe cached, etc...)

<script>
document.addEventListener('DOMContentLoaded', function () {
    try{
        let badges = document.querySelectorAll('.badge');
    
        badges.forEach(function(key, value){
            if(key.innerHTML === 'Sale' || key.innerHTML === 'En vente') {
                key.style.display = 'None';
            }
        })
        
    } catch{}
});
</script>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1748 489 357

This is an accepted solution.

You can try to add this code as well. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
product-recommendations .card__badge {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713075587666.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 18 (18)

devcoders
Shopify Partner
63 6 21

Hi @ADT77 

If you share your store URL and password with me, I will check and provide you with the solution.

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

ThePrimeWeb
Shopify Partner
1748 489 357

Hey @ADT77,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card.card--standard.card--media:has(.price.price--on-sale) .card__badge {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710615323930.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

Hello @ThePrimeWeb ,

The code above removed both badges (Sale and Sold out). I just need to hide the "Sale badge".

Thanks

ThePrimeWeb
Shopify Partner
1748 489 357

Oh I guess your sold out product also had a sale price. Let me give you another code. 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ThePrimeWeb
Shopify Partner
1748 489 357

This is an accepted solution.

Hey @ADT77,

 

In the same theme.liquid file, add this at the bottom of the file ABOVE the </body> tag. You can delete the old code.

<script>
document.addEventListener('DOMContentLoaded', function () {
    try{
        let badges = document.querySelectorAll('.badge');
    
        badges.forEach(function(key, value){
            if(key.innerHTML === 'Sale') {
                key.style.display = 'None';
            }
        })
        
    } catch{}
});
</script>

 

Screenshot for reference.

ThePrimeWeb_0-1710616174834.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

@ThePrimeWeb ,

You're amazing it worked! Thank you so much!

ADT77
Tourist
15 0 1

@ThePrimeWeb 

I just noticed that when switching the website's language from english to french, the Sale badge appears in the French version of the website. The English version which is the default language works perfectly fine. How can we fix it for the French version please?

 

Thank you!

ThePrimeWeb
Shopify Partner
1748 489 357

Hey @ADT77,

 

<script>
document.addEventListener('DOMContentLoaded', function () {
    try{
        let badges = document.querySelectorAll('.badge');
    
        badges.forEach(function(key, value){
            if(key.innerHTML === 'Sale' || key.innerHTML === 'French') {
                key.style.display = 'None';
            }
        })
        
    } catch{}
});
</script>

 

Can you replace the word French with the word displayed in your site for Sale in french, I don't know what it is haha. Screenshot below highlighting what you need to replace. Don't remove the quotes. After that replace the code that I gave you previously.

ThePrimeWeb_0-1710719304475.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

@ThePrimeWeb 

Hi there, i replaced it with the word En vente as displayed on the website but it's not working. I tried "En-vente, en-vente, envente" and none works. Please see below

 

ADT77_0-1710725769910.png

 

The code i changed below

 

ADT77_1-1710725836597.png

 

ThePrimeWeb
Shopify Partner
1748 489 357

Hey @ADT77,

 

Can I have the link to your store to test this?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

Hey @ThePrimeWeb 

Just sent you a dm.

Thanks!

ThePrimeWeb
Shopify Partner
1748 489 357

This is an accepted solution.

Hey @ADT77,

 

Adding 'En vente' worked fine for me. Maybe give it about 5 minutes to apply (Maybe cached, etc...)

<script>
document.addEventListener('DOMContentLoaded', function () {
    try{
        let badges = document.querySelectorAll('.badge');
    
        badges.forEach(function(key, value){
            if(key.innerHTML === 'Sale' || key.innerHTML === 'En vente') {
                key.style.display = 'None';
            }
        })
        
    } catch{}
});
</script>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

@ThePrimeWeb 

Thanks a lot for your help and patience! I did not try this combination whithout the dash between both words, it does work now!

ADT77
Tourist
15 0 1

Hello @ThePrimeWeb 

Was wondering if you could help a little. I just noticed that the SALE badge also appears in the ''Related Products'' section in the product page. Can you please help by hiding the badge in that section too? Please see below the 2 screenshots for the Related products section (English and french wordings)

 

ADT77_16-1712953376606.png

 

ThePrimeWeb
Shopify Partner
1748 489 357

I don't see it @ADT77 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

@ThePrimeWeb 

Hi, sorry here is the screenshot. It's the "Related products" section in the product page. On the homepage everything is fine.

Thank you!

 

ADT77_0-1713026150748.png

 

ThePrimeWeb
Shopify Partner
1748 489 357

This is an accepted solution.

You can try to add this code as well. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
product-recommendations .card__badge {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713075587666.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ADT77
Tourist
15 0 1

@ThePrimeWeb 

Thank you so much, you're the best!