Urgent - How to remove this sale bug from my product page?

Topic summary

A recurring CSS bug appears on product pages after translating store buttons, displaying an unwanted black element next to the price. The issue has occurred three times across different themes for the user.

Proposed Solutions:

Two community members offered CSS fixes to hide the problematic element:

  • Solution 1: Add CSS code to base.css file via Theme > Edit Code > Assets, targeting .span.badge.price__badge-sale with display: none

  • Solution 2: Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS and insert code targeting .price--on-sale.price__badge-sale with display: none !important

Both solutions aim to hide the sale badge element causing the visual glitch. The second solution includes a screenshot showing the expected result after applying the fix.

Status: The issue remains unresolved pending the original poster’s confirmation of whether either solution worked.

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

I translated a few buttons on the store, and then this bug pops up. It’s the 3rd time it happens to me, whenever I work on a new theme.

Can you please help me remove it? (next to the price, the little black bar)

Link: https://ggkfiq297qfhbnul-57996148898.shopifypreview.com

1 Like

some time this happened

@Ronnie99 oh sorry for that issue, can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
span.badge.price__badge-sale {display: none;}

Hi @Ronnie99

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.price--on-sale .price__badge-sale {
    display: none !important;
}

Here is the result:

https://img001.prntscr.com/file/img001/E-AvI_BoQxSim-Q__VqZcg.png

I hope this helps

Best,

Daisy