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

Change Font Color of Price for Items with Compare-at Price on Trade Theme

Solved

Change Font Color of Price for Items with Compare-at Price on Trade Theme

jordanbford1
Explorer
87 0 21

Hi!

 

I want to update the font color of the price for items that have their Compare-at price filled out/badged with Sale flag on both desktop and mobile. How can I change the font color of Price to #641832 for these items on Trade Theme?

 

Screenshot 2024-12-26 at 16.00.22.png

 

Here is my website.

 

Thank you!

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
10211 2427 3079

This is an accepted solution.

Hi @jordanbford1 

TRy this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. 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:

 

span.price-item.price-item--sale.price-item--last {
    color: #641832;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1735250902668.png

     

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 4 (4)

Made4uo-Ribe
Shopify Partner
10211 2427 3079

This is an accepted solution.

Hi @jordanbford1 

TRy this one. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. 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:

 

span.price-item.price-item--sale.price-item--last {
    color: #641832;
}

 

  • And Save.
  • Result:
  • Made4uoRibe_0-1735250902668.png

     

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
jordanbford1
Explorer
87 0 21

That worked! Thank you so much as always!

jordanbford1
Explorer
87 0 21

@Made4uo-Ribe is there a way to combine this color change and also make that sale Price bolded?

Made4uo-Ribe
Shopify Partner
10211 2427 3079

Yes, just add the font-weight or replace the code below. 

 

span.price-item.price-item--sale.price-item--last {
    color: #641832;
    font-weight: 900;
}

 

 And Save. 

Made4uoRibe_0-1735309233446.png

 

 

 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.