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

Solved

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

zilikaa
Tourist
6 0 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.

Accepted Solution (1)
webwondersco
Shopify Partner
1175 169 171

This is an 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.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

Replies 14 (14)

webwondersco
Shopify Partner
1175 169 171

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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
zilikaa
Tourist
6 0 1

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
Shopify Partner
1175 169 171

This is an 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.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
zilikaa
Tourist
6 0 1

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
Shopify Partner
1175 169 171

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

 

.Price.Price--highlight,.Price{
color:#000;
}
.Price.Price--compareAt{
color:#939393;
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Snow_Wolf
Explorer
68 0 15

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

webwondersco
Shopify Partner
1175 169 171

@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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Snow_Wolf
Explorer
68 0 15

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
Shopify Partner
1175 169 171

@Snow_Wolf  Please add the below line of CSS code.

 

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

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
siimaatje
Visitor
2 0 0

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

Moeed
Shopify Partner
5987 1623 1933

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:

Moeed_0-1696932552604.png

 

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


zilikaa
Tourist
6 0 1

Our website is www.zilikaa.com

ZestardTech
Shopify Partner
5835 1058 1397

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

David_SHT
Globetrotter
605 125 126

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

 

 

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)