How to change sale price color without affecting regular price color

[medusasmakeup]

How to change sale price color without affecting regular price color. I use sense theme.

[PageFly-Amelia]

Hi @medusasmakeup ,

This is Amelia from PageFly - a Landing Page Builder App

You can use custom CSS. Here's how you can do it:

Step 1: Access the Theme Editor

1. Go to your Shopify admin panel.

2. Navigate to Online Store > Themes.

3. Click on Actions > Edit code next to your Sense theme.

Step 2: Add Custom CSS

1. In the left sidebar, find and click on the Assets folder.

2. Open the base.css file (or theme.css if you have it).

Step 3: Add the CSS Code

Add the following CSS code at the bottom of the file:

/* Change sale price color */
.price__sale .price-item--sale {
  color: #ff0000; /* Replace with your desired color */
}

/* Ensure regular price color remains unchanged */
.price__regular .price-item--regular {
  color: inherit; /* Keeps the regular price color as defined elsewhere */
}

I hope that my solution works for you.

Best regards,

Amelia | PageFly

[steve_michael2]

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

/* Sale price styling */
.price--highlight {
    color: #ff0000 !important; /* Change to your desired color */
    font-weight: bold !important; /* Optional: Make the sale price bold */
}

/* Regular price styling */
.price--regular {
    color: #333333 !important; /* Keep the regular price a different color */
}

Thanks!
if you find my advice helpful please remember to LIKE and accept as SOLUTION.

 

[Amanda_Fordeer]

Hi @medusasmakeup,

Others have shown you how to change the sale price, but if you encounter difficulties with coding, you can utilize our Price Badges feature to adjust the size, color, format, etc., of prices. Additionally, you can add a badge alongside to emphasize and highlight the discount program as illustrated below: