How can I remove constant sale and sold out badges from product pages?

Store Design

Topic summary

Persistent sale and sold-out badges display on product pages even when items aren’t on sale or out of stock; the store owner seeks to remove them when not applicable.

Recent updates:

  • The store URL was shared; a request for password access was made to review further.
  • Multiple CSS approaches were suggested (editing theme assets like component-card.css and base.css) to hide badges globally; initial selectors did not work.
  • A more specific CSS targeting the sale badge selector successfully hid the sale badge, but the sold-out badge remains visible for the store owner. Another participant confirmed the sale badge fix worked for them.

Context:

  • The owner previously modified code to change badge location/size and may have caused the badges to always display.
  • Attached images are central, showing badges permanently visible on product pages.

Status and next steps:

  • Partial resolution: sale badge removed; sold-out badge issue persists for the original poster.
  • The discussion remains open; further guidance is needed to locate and remove or correct theme-specific code causing the sold-out badge to display, or to target its exact CSS selector.
Summarized with AI on December 27. AI used: gpt-5.
1

Hello I have been creating my store for some days now, somewhere along the way i think i may have put some code in that makes the sale and sold out badge on my product page show constantly whether i have the badges selected or not.

I need to remove the sale and sold out badge from the product pages when they are not on sale or sold out. Or maybe they are just visible and can be removed? Any help would be appreciated!

2

Hello @obiemegano

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

3
4

Hi [email removed]Obiemegano,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-card.css

Step 3: Paste the below code at the bottom of the file → Save

.card__badge{
display:none !important}

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

1 Like
5

this did not work

6

Hello @obiemegano

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom

.product__info-wrapper grid__item .badge {
    display: none !important;
}
7

this also did not work. does anyone else have any suggestions

Screenshot 2023-05-19 at 7.18.08 AM.png
Screenshot 2023-05-19 at 7.18.08 AM.png2004×568 125 KB

IMG_5366.png
IMG_5366.png1082×439 433 KB

? i have been trying to remedy this for some days now. here is an attached picture of the issue.

8

here are some pictures of the problem. I was messing with the code to adjust the sale badge location and size. In doing so i may have changed the code to always display. If anyone knows where i can go to delete this code that will be helpful. maybe i can just delete the code for this sale badge. i would be okay with that.

9

here are some pictures of the problem. I was messing with the code to adjust the sale badge location and size. In doing so i may have changed the code to always display. If anyone knows where i can go to delete this code that will be helpful. maybe i can just delete the code for this sale badge. i would be okay with that.

i am new to shopify so this is a bit frustrating with all the code that needs to be added. any info will help. thanks in advance.

10

you can try

span.badge.price__badge-sale.color-accent-2,span.badge.price__badge-sale.color-accent-2{display:none !important}
11

this removed the sale badge but the sold out badge is still there

12

This worked for me, thank you!