Change Compare At Price to red 2019

Solved
Highlighted
New Member
8 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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
16 1 4

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

0 Likes
Highlighted
Shopify Partner
39 4 5

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
Highlighted
New Member
8 0 0

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

0 Likes
Highlighted
Highlighted
Shopify Partner
39 4 5

This is an accepted solution.

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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
8 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
Highlighted
New Member
2 0 0

Greetings, could you help me please, change Compare At Price to red:
https://arcosmecenter.com/

0 Likes