Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello! I am trying to get rid of the "sale" button on a bunch of products. Some of the books that I sell are excess inventory from publishers, and I want to show that they are lower than list price, but I don't want it to look like all of them are "on sale". When I put in my price and then the "compare at price" it displays my price next to the striked-through list price (which looks great), but shopify automatically puts a "sale" tag on the listing.
I did some research and someone found a solution for this same problem, but it was for a different theme and it doesn't seem to be working for the "Studio" theme. Their solution was to go into theme.scss.liquid and at the very bottom add this line of code: .badge--sale { display: none; }
I searched for theme.scss.liquid but could only find theme.liquid. (I figured this is the same spot). I added the code to the very bottom and saved my changes, but it had no effect on my shopify page. I tried adding the code to the line above </body> and that didn't work either. All of the "sale" icons are still present. I am guessing that this has something to do with the fact that I am trying to apply the same line of code to the "Studio" theme, and it might require a different line of code.
Hoping someone can help me figure out how to remove these pesky "Sale" icons! My website is www.galaxybooks.ca. Thanks in advance!
Cheers,
Miraj
Solved! Go to the solution
This is an accepted solution.
Hi @GalaxyBooks,
Different themes have different elements so you need to use different code.
Please try adding this code at the bottom of the component-card.css under the Assets section
.card__badge {
display: none;
}
Finally, hit Save.
I hope it helps.
This is an accepted solution.
The above code is for removing the sale badge from your collection page. You may also want to remove it from your product page.
Please add this code to the bottom of the component-price.css under Assets
.price--sold-out .price__badge-sold-out, .price--on-sale .price__badge-sale {
display: none !important;
}
This is an accepted solution.
Hi @GalaxyBooks,
Different themes have different elements so you need to use different code.
Please try adding this code at the bottom of the component-card.css under the Assets section
.card__badge {
display: none;
}
Finally, hit Save.
I hope it helps.
This is an accepted solution.
The above code is for removing the sale badge from your collection page. You may also want to remove it from your product page.
Please add this code to the bottom of the component-price.css under Assets
.price--sold-out .price__badge-sold-out, .price--on-sale .price__badge-sale {
display: none !important;
}
@AvadaCommerce thank you so much! Both solutions worked! Really appreciate you taking the time to respond to my question
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025