how to color in discount badge on product page

Store Design
, , ,

Topic summary

A user seeks help adding a colored background to their product discount badge, which currently displays as plain text (e.g., “43% off”).

Solutions provided:

  • Wrap the discount text in an HTML element (like <span class="discount-text">) to target it with CSS
  • Add CSS styling with background color and text color:
    .discount-text {
  background-color: #000;
  color: #ffffff;
  padding: 5px;
}

Implementation locations:

  • Add CSS to component-card.css or another theme CSS file in the Assets folder
  • Alternatively, insert CSS within <style> tags in the theme.liquid file’s <head> section
  • Access via: Shopify Admin > Online Store > Themes > Actions > Edit code

A video tutorial link was shared for implementing custom badges at different locations. The discussion remains open as the user asks for clarification on applying this to individual product pages.

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

hi i currently have my sale showing 43% off but theres no badge with color its just text how can i make it white writing and black background.

https://nexvision4k.online/products/nexvision-miniprojector

2

Hello @nv100 ,

First wrap the code which outputs the value off in an element.
e.g.

47% OFF

and then us this css

.discount-text { background-color: #000; color: #ffffff; }

Thanks

3

Hello @nv100 , Please follow these steps to add this CSS code:

  1. Access your Shopify Admin.
  2. Go to Online Store > Themes.
  3. Locate the theme you are currently using and select Actions > Edit code.
  4. In a CSS file: Go to Assets, find your CSS file, and add your styles. OR find and write the below code in component-card.css OR
  5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a tag in the section.
.collection .card__badge {
    background: #000000;
    color: #ffffff;
    padding: 5px;
}

Here is the screensshot.

Screenshot_65.png
Screenshot_65.png1338×577 252 KB

If this solution is helpful, please consider liking and accepting it.
S.P

4

now on the product page of my product how do i do this?

thank you

5

Hey @nv100 ,

You can add custom code to enable any number of badges at different locations.

Hope this will helps…