How to remove 'sale' sticker in Dawn theme?

Store Design
1

Hello,

Is there a way to remove the “SALE” sticker from my products? (screenshot below).

I know it’s because I have the two prices, but I’m wanting this, just without the sale sticker.

I have a hire business so I’m wanting to show the RRP ($380) and the hire price ($100) without the sale sticker, is this possible? I’m using the dawn theme.

Thank you!!

Sheriden_Webb_0-1660633836983.png
Sheriden_Webb_0-1660633836983.png501×200 11.6 KB

2

@Sheriden_Webb
Please share your store URL

3

www.oceangroveoutfithire.com.au

Password - OGOUTFITHIRE

4

Hi @Sheriden_Webb !

This is PageFly - Advanced Page Builder.

Bro please try this code;

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second

.card__badge {display: none;}

I hope my recommendation will be beneficial for you,

Best regards,

Pagefly

5 Likes
5

@Sheriden_Webb
Add this css in base.css file

.badge.price__badge-sale.color-accent-2 {
  display: none !important;
}
6

Hi @PageFly-Victor

Thanks so much - you are fantastic. This code has worked to hide the code from my collections page, but not from individual products - is there a code that can hide the ‘sale’ button from the individual product page?

Thanks again, appreciate your help!

7

This is perfect - done exactly what I needed. Thanks so much @Dbuglabpvtltd !!

8

Hi @Sheriden_Webb

For the individual product page: open price.liquid in the Snippets folder. At the end of the code, comment out the line that displays the Sale label:

{%- if show_badges -%}
{% comment %}

{{ ‘products.product.on_sale’ | t }}

{% endcomment %}

{{ ‘products.product.sold_out’ | t }}

{%- endif -%}

2 Likes
9

Updated: I actually just removed all of that code, and I think that did it. Thank you. This is what I need, too…to remove it from the individual products page. I don’t understand what you mean by comment out the line, though. Could you explain further? Thank you!

10

this is easy, go to components-price.css inside assets folders and look for “badge” you will see where is the sales badge being displayed, sometimes says display: in line … you just change for none like:

.price–sold-out .price__badge-sold-out,
.price–on-sale .price__badge-sale {
display: none;
}

important to understand the “display:” which allows the code to SHOW something in front end

1 Like