New Shopify Certification now available: Liquid Storefronts for Theme Developers

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

Solved
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
490 79 84

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.
- Coffee Tip? 🙂

View solution in original post

Replies 9 (9)
webwondersco
Shopify Partner
490 79 84

@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.
- Coffee Tip? 🙂
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
490 79 84

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.
- Coffee Tip? 🙂
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
490 79 84

@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.
- Coffee Tip? 🙂
Moeed
Shopify Partner
3051 761 925

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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
zilikaa
Tourist
6 0 1

Our website is www.zilikaa.com

ZestardTech
Shopify Expert
5300 950 1261

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
Trailblazer
605 123 123

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)