how to color in discount badge on product page

Store Design
, , ,
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…