Change color for 'NEW' product badge only

[blakelyhi]

I am using this code to change the look of all product badges, but I would like for one to be different colors and can’t figure out how to target the ‘NEW’ badge only! All other info staying the same except color will be #FF31F0 instead. Thanks in advance!

URL: seniqbrand.com

.product-badge {
    height: fit-content!important;
    width: fit-content!important;
    background: #614542!important;
    border: unset!important;
    color: #FCFBF0!important;
    font-size: 0.78rem!important;
    letter-spacing: 0.75px !important;
    padding: 0.8rem;
    border-radius: 10px !important;
}

[BSSCommerce-HDL]

Hi @blakelyhi ,Can you kindly share the details of your problem (screenshot/ link page) with us? We will check it and suggest you a solution if possible.

[BSSCommerce-B2B]

Hi @blakelyhi

I have investigated your issue, and it appears that you are writing the CSS code inline within the liquid file of a collection, correct? Furthermore, you are using !important to override the original CSS properties of the badge. Because the selectors for the badges are likely the same, you won’t be able to apply separate CSS styles to individual badges.

You might want to try following my instructions below:

1. Remove the inline CSS code.
2. Instead, access theme.css where the original CSS for the badges is located. Adding additional CSS rules to theme.css would be better than directly modifying the liquid file in this manner.

Here, you can modify the CSS parameters of the original badge by editing the above CSS snippet. If you want to apply custom styling to individual badges, you can revisit the earlier liquid file and modify it by adding the class product-badge-new to the badges you want to style differently.

Afterward, return to theme.css and add the following CSS snippet at the end of the file.

.product-badge-new {
    height: fit-content!important;
    width: fit-content!important;
    background: #614542!important;
    border: unset!important;
    color: #FCFBF0!important;
    font-size: 0.78rem!important;
    letter-spacing: 0.75px !important;
    padding: 0.8rem;
    border-radius: 10px !important;
}

Then the issue of the text moving up will disappear.

If it helps you, please like and mark it as the solution.

Best Regards

[blakelyhi]

Thank you for that detailed explanation, super helpful! I moved those over to theme.css but am still not having luck changing the background of the NEW badge only - see photo. Hot pink is what I want it to look like and what the targeted CSS indicates, but still the product-badge is overriding this despite removing the “important” tag.

.product-badge {
  height: fit-content !important;
  width: fit-content !important;
  background: #614542;
  border: unset !important;
  color: #fcfbf0 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.75px !important;
  padding: 0.8rem;
  border-radius: 10px !important;
}

.product-badge-new {
  height: fit-content !important;
  width: fit-content !important;
  background: #ff31f0 !important;
  border: unset !important;
  color: #fcfbf0 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.75px !important;
  padding: 0.8rem;
  border-radius: 10px !important;
}

[BSSCommerce-B2B]

Hi @blakelyhi

I noticed you are using the wrong CSS

it should be background-color, not color.

If you change it to background, it will look like this

[blakelyhi]

That didn’t solve the issue either, but I targeted it differently and it worked. Thanks for helping get there!