How to remove a sale label from the collection page when we keep selling & compare price different?

[zilikaa]

We have a Prestige Theme. We want to keep selling price & compare price different. But when we are doing so, there is a sale label at the top left of the image. We want to remove it.

We have partially been able to remove using Online store> Edit Default theme content> Product> & then removing  "on Sale" written in On Sale Label. But still after doing this, there is a very small white empty rectangle over the same top left corner of the image. Pls help us in removing it too.

 Thank you in  advance.

[webwondersco]

@zilikaa , Could you please share the URL of the page where this white space is there. So, can check and guide you

[zilikaa]

Yeah Sure.

Link for the page is this - https://www.zilikaa.com/collections/home-page-featured?page=2

Its the 20th product on this  page by the product title = "Royal Levender Banarasi Uppada silk saree"

At the top left, there is a small rectangle box on  the image.

[webwondersco · Accepted solution]

Please add the below line of CSS at the end of your theme.css file.

body .ProductItem__Label--onSale{
display: none;
}

You can find theme.css file in the assets folder of your theme.

[zilikaa]

Thank you so much! It worked. 

Also Pls help me in changing color of the text of the discounted price. 

What I want to do is that, for non-discounted products, if there is a black color so for discounted products the "compare at" price text should be grey and final discounted price text color to be same black as of non - discounted products.

Pls help in it. 

[webwondersco]

@zilikaa , Please add the below line of CSS code.

.Price.Price--highlight,.Price{
color:#000;
}
.Price.Price--compareAt{
color:#939393;
}

[Snow_Wolf]

Hello @webwondersco and thanks for a great tip/solution. Anyway to adjust your code so that it only hides the label on mobile?

[webwondersco]

@Snow_Wolf , yes possible.

Just add the accepted CSS solution to the media query. just like below 

@media(max-width:767px){
body .ProductItem__Label--onSale{
display: none;
}
}

The above code will work for mobile screen

[Snow_Wolf]

Thanks for you quick response @webwondersco , however it doesn't seem to have worked. FYI I included your code in the base.css file (since I use the Refresh theme). Here's the wesite if you want to check it out, thanks!

[webwondersco]

@Snow_Wolf  Please add the below line of CSS code.

@media(max-width:767px){
body .card__badge{
display: none;
}
}

[siimaatje]

........................

[Moeed]

Hey @zilikaa 

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

<style>
span.ProductItem__Label.ProductItem__Label--onSale.Heading.Text--subdued {
    display: none;
}
</style>

RESULT:

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

Best Regards,
Moeed

[zilikaa]

Our website is www.zilikaa.com

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.ProductItem__Label {
display: none;
}

[David_SHT]

Hi @zilikaa ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder ->theme.css file.

Add this following code at the bottom of page.

.ProductItem__Label.ProductItem__Label--onSale.Text--subdued {
    display: none;
}

result:

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

David | SalesHunterThemes team