Get rid of sale badge border on dawn theme

Store Design

Topic summary

A Shopify store owner using the Dawn theme wanted to remove the SALE badge while keeping the SOLD OUT badge on product listings. An image showed a small white badge appearing on sale items.

Initial Solutions Provided:

  • One approach involved editing the card-product.liquid file in the Snippets folder, replacing code to display only the sold-out badge
  • Alternative CSS solutions were offered targeting specific badge classes in base.css

Follow-up Issue:
The initial fix worked on collection pages but the SALE badge remained visible on individual product pages.

Final Resolution:
Adding the following CSS code to base.css successfully removed all SALE badges across both collection and product pages:

.badge.color-accent-2 { display: none !important; }
.badge.color-accent-1 { display: none !important; }

The issue was fully resolved, with the original poster and another user confirming the solution worked perfectly. The discussion is marked as solved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hello, I have tried many options of getting rid of the sale badge on my products and when I try fixing it I only manage to get rid of the sale badge and the sold out badge. I only want to remove SALE badge and keep SOLD OUT badge. As you can see I still have that small white badge next to products that are “on sale”

shopify help 2.jpg
shopify help 2.jpg690×508 35.3 KB

1 Like
2

Hi @Liam_15_1 , can you share your store url?

3

Of course!

https://brand-supply.store/?_ab=0&_fd=0&_sc=1

1 Like
4

Hi @Liam_15_1

You need to get your hands dirty to implement this. Please follow the instructions below

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

Go to Snippet folder and open the card-product.liquid file.

Find the card__badge

Replace the code highlighted in the image with the code below.

Made4uoRibe_0-1704836121230.png
Made4uoRibe_0-1704836121230.png1900×911 94.8 KB

{%- if card_product.available == false -%}
            
              {{- 'products.product.sold_out' | t -}}
            
          {%- endif -%}

Make sure to SAVE

Completed code should look like this

Made4uoRibe_1-1704836327746.png
Made4uoRibe_1-1704836327746.png1639×864 83.3 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

@Liam_15_1 , Add this code to base.css :

span#NoMediaStandardBadge-template--20094800691530__product-grid-8534532260170 {
    display: none !important;
}
6

@Liam_15_1 , go to base.css and add the following code to remove all the sale badge:

.badge.color-accent-2 {
    display: none !important;
}
7

Thank you so much! :slightly_smiling_face:

8

Your always welcome (",)

9

Need help again I’m afraid… just saw that it worked on my featured collection but not when you click in on one of my products, then the sale badge is still there somehow :disappointed_face:

10

@Liam_15_1 , try to add this code to base.css :

.badge.color-accent-1 {
    display: none !important;
}
1 Like
11

Thank you so much! Worked perfectly, now the badge is gone on the product page too :slightly_smiling_face:

1 Like
12

I have been trying many other codes that did not work. Your thoroughly detailed instructions and code worked perfectly for my store- Many thanks for posting this solution!!

13

Hi @justin30102

Welcome! Would you mind hitting thumbs-up? Thanks!