Changing color of original price on featured collection and individual product page

Store Design
, , , , , ,

Topic summary

Goal: Change the original (crossed‑out) price color on the homepage featured collection and individual product pages, while the sale price is already green.

Context and attempts:

  • Sale price was styled via CSS (e.g., .price-item–sale to green). The user sought to style the “original/regular” price (crossed‑out) differently.
  • Store URL and password were shared to review.

Solutions proposed:

  • Add CSS in the theme’s main CSS file (Assets > base.css/style.css/theme.css):
    • .price-item.price-item–regular { color: red !important; }
  • Alternative, more specific for crossed‑out element where themes wrap the old price in an s (strikethrough) tag:
    • .price__container s.price-item.price-item–regular { color: #0bda51; }

Outcome:

  • User confirmed the CSS fix worked, resolving the issue.

Notes:

  • Key classes: .price-item–regular = original price; .price-item–sale = discounted price.
  • Using the s tag in the selector targets the crossed‑out presentation specifically.
  • A screenshot was provided to show the result. The thread is resolved; no open questions remain.
Summarized with AI on January 17. AI used: gpt-5.
1

I would like to change the color of the original price (crossed-out) on both the featured collection on the homepage AND on each individual product page. I have figured out how to change the sale price to green but I want to make the original price red.

In order to change the sale price text to green, I am using this code in the Custom CSS on customizer > featured collection:

h2 {
color: #00ffff;
}
div {
color: #0bda51;
}

And for the product page, I’m using this code in Themes > Edit Code > Assets > component-price.css:

span.price-item.price-item–sale.price-item–last {
color: #0bda51
}

Please help!!

1 Like
2

Hi @jonnysoup

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Here you go: https://b526d5-3.myshopify.com/

Thanks!

1 Like
4

Its password protected.

5

password: peifre

Sorry about that. Thank you

1 Like
6

Hi @jonnysoup

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.price-item.price-item--regular {
    color: red !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

7

Hi @jonnysoup

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.price__container s.price-item.price-item--regular {
    color: #0bda51;
}
1 Like
8

Thank you!! This worked.