Change Compare At Price to red 2019

Solved
Highlighted
New Member
4 0 0

I've searched through tons of forums and old posts for how to change the compare at price to red, and none of the answers have worked for me thus far. I'm not well versed in coding, but most of the answers had codes that I couldn't even find. 

 

Can someone please help me with this? 

0 Likes

Hello 

Please share your site url so that i can do analysis for the required changes and share you the solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
13 1 1

Hi there - is this for the collection pages or product page, or both? Also what theme are you using?

0 Likes
Shopify Partner
14 1 0

It will depend on your theme and if you can't configure the style of the compare at price you could identify the class or ID of the HTML element and modify the corresponding CSS.

 

In my case the element was class="was" so i found '.was' in the theme. I then found the corresponding CSS entry in stylesheet.css the line was:

 

.was, .product-compare-price, .compare-price, .was-related { color: #ba2323; text-decoration: line-through; }

You might have luck searching for one of the above in your themes stylesheet.css file, if so change add or update color to "color: red" and it'll change to red.

 

0 Likes
New Member
4 0 0

For all pages. I want it to be consistent throughout the website. I'm using the minimal theme!

0 Likes

Success.

Shopify Partner
14 1 0

Open in the theme code editor timber.scss.liquid find '.product-single__sale-price' and add the line 'color: red'. That will make the Compare at  Price red in the Minimal theme when viewing a product. It should look something like below when your done.

 

.product-single__sale-price {
  opacity: 0.7;
  margin-left: 6px;
  font-size: 1.27 * $baseFontSize;
  font-weight: $headerFontWeight;
  color: red;
}

 

If you want to make the change in the products listing too you'll have to edit theme.scss.liquid and find below and add color like above.

 

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}
0 Likes

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

 

.grid-link__sale_price {
    color: red;
}

 

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
4 0 0

This worked! I wanted to change the actual sale price but this will work as well. Thank you so much. I was so frustrated lol.

0 Likes