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

Store Design
, , , ,
1

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.

1 Like
2

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

3

Our website is www.zilikaa.com

4

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.

5

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.

6

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 tag

RESULT:

Moeed_0-1696932552604.png
Moeed_0-1696932552604.png1556×728 278 KB

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

Best Regards,
Moeed

7

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;
}
8

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:

David_SHT_0-1696934032968.png
David_SHT_0-1696934032968.png3160×2416 1.13 MB

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

David | SalesHunterThemes team

9

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.

10

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

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

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

1 Like
12

@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

1 Like
13

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!

14

@Snow_Wolf Please add the below line of CSS code.

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

…