How Do I Change The "Sale" Tag Color In Sense Theme?

Store Design
,

Topic summary

A Shopify store owner wants to change the “Sale” badge color from white to a different color in the Sense theme. The issue affects both desktop and mobile versions of their product pages.

Initial Solution Provided:

  • Add CSS code to modify .product .price .badge with custom background-color and color properties
  • Code should be placed in the section-main-product.css file

Key Problem Identified:

  • The original code only worked on desktop because it was placed inside a media query for screens wider than 990px
  • Mobile version remained unchanged

Correct Implementation:

  • The CSS code must be placed outside of the @media screen and (min-width: 990px) block
  • This ensures the style applies to all screen sizes, not just desktop
  • The corrected code structure shows the badge styling should come after the media query closes

Status: The discussion appears to have reached a resolution with the proper code placement identified, though final confirmation of success is not explicitly stated.

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

How can I change the color of the Sale icon on the Sense theme. It is currently white but I want it to be something else. Thank you!

Screenshot 2023-08-08 at 11.28.23 AM.png
Screenshot 2023-08-08 at 11.28.23 AM.png664×114 6.57 KB

2

Please provide store urls

3

https://charmente.com/products/theultimatecosmeticbag

I’ve tried several solutions already but they only seem to work for the desktop version of my website.

4

Hi Simon, Because you only writing the style for desktop screen.
Use this code- you can add this code in any style file.

.product .price .badge {
    background-color: #000;
    color: #fff;
}

or add this style on section-main-product.css file in assets line number 372

saurav9005_0-1691512123113.png

5

What do you mean I am only writing the style for desktop screen? I used the code that you gave me and its still only working on desktop. This is what mobile still looks like.

IMG_5CB44480C6B6-1.jpeg
IMG_5CB44480C6B6-1.jpeg1170×2532 156 KB

6

Hi Simon,

Can you paste the code at the bottom of section-main-product.css after

saurav9005_2-1691512718815.png
saurav9005_2-1691512718815.png1012×165 4.49 KB

.product .price .badge {
    background-color: #000;
    color: #fff;
}
7

Yeah its still not working.

8

It should be outside of media screen

incorrect

@media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__info-wrapper, .product--large:not(.product--no-media) .product__media-wrapper {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
 
  .product .price .badge {
    background-color: #000;
    color: #fff;
}
}

Correct

@media screen and (min-width: 990px) {
.product--large:not(.product--no-media) .product__info-wrapper, .product--large:not(.product--no-media) .product__media-wrapper {
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
 
 
}

 .product .price .badge {
    background-color: #000 !important;
    color: #fff !important;
}
1 Like