Hi - im keen to include the striked through price but want the “Sale” badge removed from both the image and next to the price on the product page.
I have included code from other discussion boards:
Have also included the following on base.css
.badge.price__badge-sale.color-accent-2 {
display: none !important;
Whilst this has solved the issue for desktop - if I go on my site on a mobile the Sale badge still remains next to the price?
Any suggestions would be great,
Best,
James
Hi @JamesC1990
You need to add media query maybe there are some codes that is blocking your code.
Check this one if it work. If not would you mind to share your store?
@media only screen and (max-width: 749px){
.badge.price__badge-sale.color-accent-2 {
display: none !important;
}
}
Thanks!
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hello James,
Product Card:
If u want to completely remove the sale badge I would remove this part of Code in the card-product.liquid file
before:
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
after:
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- endif -%}
This code is appearing 2 Times in the card-product.liquid File. First: Line 123 - 136, Second: 308 - 322.
If u want to do this via css Then try:
.product-card-wrapper .card__badge{
display:none!important;
}
Keep in Mind this css also removes the Soldout Badge.
Product Page:
add the css:
price__badge-sale{
display:none!important;
}
Another Solution is to set the Property show_badges:false when rendering Price on your Product Page:
change the Code lines of main-product.liquid Line 100 - 105
From:
{%- render 'price',
product: product,
use_variant: true,
show_badges: true,
price_class: 'price--large'
-%}
To:
{%- render 'price',
product: product,
use_variant: true,
show_badges: false,
price_class: 'price--large'
-%}
Best regards Erik
Removed Content and added to previous Replay
Thanks Erik for your fast response.
Sorry am new to code. Happy to take the CSS route as wont be in a position where products are sold out.
Just so im clear - Go edit code > snippets > card-product.liquid and past
.product-card-wrapper .card__badge{
display:none!important;
}
At the very end of all the code?
Best,
James
Yea right you have to go to edit code → assets → base.css and add the css at the end of the file.
for the Product card:
.product-card-wrapper .card__badge{
display:none!important;
}
For the product page:
price__badge-sale{
display:none!important;
}
Best regards
Hi Erik,
Thanks for your continued help - have added but still appearing when on a mobile
Best,
James
Hi - Thanks for your help.
Have added in on base.css but still appearing.
Site is: https://80563f-4.myshopify.com/
PW: James123!
Example is on product
on a mobile.
Best,
James
Okay @JamesC1990
Did you try the way i showed you via editing the liquid files,
Those definitely will help your not displaying it at any time.
If you want me to deep dive into it you can provide your myshopify url and a password if there is one or send me the preview link of your theme.
Best Regards Erik
Hi Erik,
I didnt try the liquid change (incase I do want to have a sale badge in future)… and figured removing code at the end is easier.
Site is https://80563f-4.myshopify.com/
PW: James123!
Example speicifically at the moment is on New Stormy Waves product.. havent set up anymore yet.
Best,
James
Okay the Problem seems to be a little bit weird,
What you can try:
Add this to the component-price.css file
.badge.price__badge-sale{
display:none!important;
}
or write it with inline css in the price.liquid file
search for price__badge-sale and change this code:
{{ 'products.product.on_sale' | t }}
To this:
{{ 'products.product.on_sale' | t }}
Best Regards Erik
Hello Community: This is a noble thank you to: Erik Abrio, it took me days to find the solution to removing my sales badges on my pages. Came across your instructions as you were helping: Mr. Jame. I tried it, and it worked.
Thank you kindly
Rodorian Jewel
Hi,
I am also facing a similar problem in which I want to remove this “limited time offer.” badge from products.
Please share the solution for this.
You can analyze this page through here. - Link
Hey @firozmansoori .
It seems like this Lable is coming from the App “Lably”.
I personally dont know the app but u can probably remove it in the app for this product.
Best Regards Erik
