Hide the Sale badge from product thumbnail
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!
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.
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.
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.
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.
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.
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
The code i changed below
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)
Hi, sorry here is the screenshot. It's the "Related products" section in the product page. On the homepage everything is fine.
Thank you!
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.
Community Blog Articles
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024