We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Changes discount price color

Solved

Changes discount price color

takeoverapparel
Excursionist
51 0 13

Hi, for all my product pages, I have a related collection at the bottom of the page. I want to change the collection sale price to red. Basically want it to look like my home page. I included a picture of both below. My website is www.takeoverapparel.com, and the password is takeover.

 

Home Page

Screenshot 2025-06-27 at 7.36.04 PM.png

 

What I want to change 

Screenshot 2025-06-27 at 7.33.02 PM.png

 

 

Accepted Solution (1)

The_ScriptFlow
Explorer
201 16 25

This is an accepted solution.

Hey @takeoverapparel,

In order to make the color of the compare_at_price in the related products on the product page then you need to paste the following code in the end of base.css file.

Here is how you can find the base.css file.

Go to Shopify Admin >> Click on Online Store >> Themes >> Edit Code >> base.css >> Go to the end of this file and paste the following code.

s.price-item.price-item--regular {
  color: #f00 !important;
}

Results:

The_ScriptFlow_0-1751076659564.png

 

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com
- For any custom section queries, bug fixing please visit: Level 2 Fiverr Profile
- Buy Me a Coffee? Nah… Let’s Upgrade to a Car
- If my solution was helpful, mark it as a solution and hit the like button!

View solution in original post

Replies 3 (3)

PaulNewton
Shopify Partner
8031 685 1646

@takeoverapparel Either change the related color theme settings or color schemes theme settings.

Or that would require an advanced theme customization to add data to those elements to indicate what type of badge it is for styling to target.

Because currently any styles targeting badges would apply to both 'sold out' and 'sale' badges.

 

If you need this customization then contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


The_ScriptFlow
Explorer
201 16 25

This is an accepted solution.

Hey @takeoverapparel,

In order to make the color of the compare_at_price in the related products on the product page then you need to paste the following code in the end of base.css file.

Here is how you can find the base.css file.

Go to Shopify Admin >> Click on Online Store >> Themes >> Edit Code >> base.css >> Go to the end of this file and paste the following code.

s.price-item.price-item--regular {
  color: #f00 !important;
}

Results:

The_ScriptFlow_0-1751076659564.png

 

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com
- For any custom section queries, bug fixing please visit: Level 2 Fiverr Profile
- Buy Me a Coffee? Nah… Let’s Upgrade to a Car
- If my solution was helpful, mark it as a solution and hit the like button!
takeoverapparel
Excursionist
51 0 13

Thank you that worked! Do you know how I can get the black price text to be on top and the red price text to be on the bottom like it is on my home page in the same section you gave me code for.