Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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.
@zilikaa , Could you please share the URL of the page where this white space is there. So, can check and guide you
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.
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.
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.
@zilikaa , Please add the below line of CSS code.
.Price.Price--highlight,.Price{
color:#000;
}
.Price.Price--compareAt{
color:#939393;
}
Hello @webwondersco and thanks for a great tip/solution. Anyway to adjust your code so that it only hides the label on mobile?
@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
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!
@Snow_Wolf Please add the below line of CSS code.
@media(max-width:767px){
body .card__badge{
display: none;
}
}
........................
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
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;
}
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
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)
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024